插入HTML代碼元素

-1

後，我有一個html文件，看起來像這樣：插入HTML代碼元素

...html code... 
<ul id="my_ul"> 
...html code...

使用JavaScript我想插入下面的HTML代碼裏面的文件後，馬上<ul id="my_ul">：

到目前爲止，我有這個，但不是預期的結果。請問我做錯了什麼？

var para1 = document.createElement("li"); 
var para2 = document.createElement("span"); 
var node = document.createTextNode("Some text"); 
para2.appendChild(node); 
var para3 = document.createElement("ul"); 
var element = document.getElementById("my_ul"); 
element.appendChild(para1); 
element.appendChild(para2); 
element.appendChild(para3);

來源

2015-01-21 Malasorte

最後三線應該讀取element.parentNode.appendChild（para1）;如果你真的想在ul ul後面添加ul後面的子字符，不是ul – jPO 2015-01-21 10:51:54

如果你想更短的代碼，而無需爲每個HTML元素創建對象只是這樣做：

var element = document.getElementById("my_ul"); 
var html = '<li><span>Some text</span></li>'; 
element.innerHTML = html + element.innerHTML;

來源

2015-01-21 11:05:23 jrarama

這是你想要做的嗎？

演示：Fiddle

var para1 = document.createElement("li"); 
var para2 = document.createElement("span"); 
var node = document.createTextNode("Some text"); 
para2.appendChild(node); 
para1.appendChild(para2); 
element = document.getElementById("my_ul"); 
element.appendChild(para1);

來源

2015-01-21 10:56:53

-1

var ul = document.getElementById("my_ul"); 
var li = document.createElement("li"); 
var span = document.createElement("span"); 
var textNode = document.createTextNode("Some text"); 
span.appendChild(textNode); 
li.appendChild(span); 
ul.appendChild(li);

來源

2015-01-21 10:56:59 Semicolon

的最後一個孩子謝謝你的編輯，但是沒有任何解釋的代碼仍然沒有很好的答案。 – 2015-01-21 10:59:11

另外，我很確定'document.createTextNode（「某些文本」）不會做你認爲它做的事情。 – 2015-01-21 11:04:33

你是對的。分開我必須創建文本節點和li元素。 – Semicolon 2015-01-21 11:12:38

您的代碼做到這一點：

element.appendChild(para1);

讓列表項目的原始列表

的孩子

element.appendChild(para2);

使跨度原始列表的子

element.appendChild(para3);

使新的列表中的原始列表

，需要在每個元素追加的孩子到您想要作爲其父項的元素，而不是將所有內容都附加到原始列表中。

用適當的變量代替element。

來源

2015-01-21 10:57:29 Quentin

像這樣：

var ul = document.getElementById("my_ul"); 
 

 
var li = document.createElement("li"); 
 
var span = document.createElement("span"); 
 
var text = document.createTextNode("Some text"); 
 
span.appendChild(text); 
 
li.appendChild(span); 
 
ul.appendChild(li);

<ul id="my_ul"> 
 
</ul>

來源

2015-01-21 10:58:39 harry0000

$(document).ready(function(){ 
 
    
 
var para1 = document.createElement("li"); 
 
var para2 = document.createElement("span"); 
 
var node = document.createTextNode("Some text"); 
 
para2.appendChild(node); 
 
    
 
var element = document.getElementById("my_ul"); 
 
element.appendChild(para1); 
 
para1.appendChild(para2); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<ul id="my_ul"> 
 
</ul>

來源

2015-01-21 11:00:35 Dhaval

插入HTML代碼元素

回答

相關問題