用Javascript更改完整的DIV內容

我是Javascript新用戶，並且已經知道如何用HTML更改HTML中的內容。但現在，我想更改完整的div內容。用Javascript更改完整的DIV內容

我有一個div有2個按鈕，其中一個按鈕叫做'Login'。我想要的是：

當訪問者點擊'登錄'時，該div顯示「另一個內容」，您現在可以登錄。

我該怎麼辦呢？

編輯：

DIV內容：

 <div id="vote" align="center"> 
     <span style="font-size: 30px">Voten</span><br /><br /> 
     <?php 
      if(isset($_SESSION['username']) && isset($_SESSION['password'])) { 
     ?> 

     <?php 
      } else { 
     ?> 
      <script type="text/javascript"> 
       function login() { 
        Change div content.... 
       } 

       function register() { 
        alert('coming soon, lol'); 
       } 
      </script> 
      You must be logged in, to vote.<br /> 
      <input type="button" class="button" name="login" id="login" value="Login" onclick="login()" /><br /><br /> 
      Not a member yet?<br /> 
      <input type="button" class="button" name="login" id="register" value="Register now!" onclick="register()" /> 
     <?php 
      } 
     ?>

還是那句話：我要的是，如果訪問者點擊登錄按鈕，在div的內容會變成不同的HTML代碼。

來源

2014-10-11 Aarivex

顯示你已經嘗試過的代碼。 – vusan 2014-10-11 20:05:13

你能更具體嗎？你有什麼問題？點擊按鈕時採取行動？隱藏內容？使隱藏的內容可見？ – gilly3 2014-10-11 20:06:56

編輯我的話題。 – Aarivex 2014-10-11 20:13:57

使用純JavaScript，你有兩種可能性：

使用DIV對象的innerHTML屬性，將解析你和你創建DOM節點
自己創建這些DOM節點。 Wikipedia Link for DOM

使用innerHTML：

這將使用瀏覽器的HTML解析器。 DOM的

// You first have to select this DIV, for example by Id 
var divContainer = document.getElementById('idOfDiv'); 

// Let's set the new HTML content of the div 
divContainer.innerHTML = '<b>The HTML code you want !</b>';

創建節點：

var divContainer = document.getElementById('idOfDiv'); 

// You need to create the DOM nodes you want want to append 
var newDomNode = document.createElement('p'); // Put as property the tag you want to create 

// You have multiple choices here, you can set again the newDomNode innerHTML : 
newDomNode.innerHTML = '<b>Some HTML</b>'; 

// Or the innerText : (This will just put text) 
newDomNode.innerText = 'Some Text to say Hello!';

然後，你需要創建newDomNode追加到所需的DIV，這將插入節點作爲容器的最後一個子：

divContainer.appendChild();

可以遞歸地追加這些節點。例如，您可以將另一個DOM節點追加到newDomNode。如果您想使用divContainer.insertBefore()(link)可以將節點放在所需位置，您也可以。

這是純JavaScript，它是理解JavaScript如何工作的好方法。在去jQuery之前瞭解DOM非常重要。但在現實生活中，使用像jQuery這樣的庫會更容易。

來源

2014-10-11 20:19:59 kube

謝謝。但沒有其他可能性？ – Aarivex 2014-10-11 20:26:47

我的回答更多的是告訴你當你是新來的JS時你需要知道的事情，並且你想在jQuery之前學習它是一種好方法。但jQuery會更好地以簡單的方式完成任務。 – kube 2014-10-11 20:30:43

好的，再次感謝。但是，我可以如何放入更多的HTML代碼？ – Aarivex 2014-10-11 20:33:52

用Javascript更改完整的DIV內容

回答

相關問題