Вставьте HTML-код после того, как элемент

Question

У меня есть 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); 

Answer 1

Если вы хотите более короткий код без создания объектов для каждого HTML элементов просто сделать это:

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

Answer 2

Это что вы хотите сделать?

Демо: 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); 

Answer 3

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); 

Answer 4

Ваш код делает это:

element.appendChild(para1); 

Сделать элемент списка ребенка исходного списка

element.appendChild(para2); 

Сделать пролет ребенка исходного списка

element.appendChild(para3); 

Сделать новый список ребенок исходного списка

---

Вы должны добавить каждый элемент к элементу, который вы хотите быть его родительским, вместо добавления всего в исходный список.

Заменить element с соответствующей переменной.

Answer 5

Как это:

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>

Answer 6

$(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>