javascript - 原生 js 如何追加 html
迷茫
迷茫 2017-04-10 17:52:08
0
9
670

原生 js 如何追加 html?(有没有像 jquery append() 那样可以直接插入 <ul><li>item1</li><ul> 这种的方式呢?)

迷茫
迷茫

业精于勤,荒于嬉;行成于思,毁于随。

reply all(9)
大家讲道理

element.insertAdjacentHTML(position, text);

position 是相对于 element 元素的位置,并且只能是以下的字符串之一:

  1. beforebegin:在 element 元素的前面。

  2. afterbegin:在 element 元素的第一个子节点前面。

  3. beforeend:在 element 元素的最后一个子节点后面。

  4. afterend:在 element 元素的后面。

text 是字符串,会被解析成 HTML 或 XML,并插入到 DOM 树中。

// <p id="one">one</p> 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '<p id="two">two</p>');

// 此时,新结构变成:
// <p id="one">one</p><p id="two">two</p>

参考Element.insertAdjacentHTML()

左手右手慢动作
<p id="d">原生 js 如何追加</p>

document.getElementById('d').innerHTML+="这样子";

var dom = document.createElement('span');
dom.innerHTML="这样子";
document.getElementById('d').appendChild(dom);
大家讲道理

给你来个简单方式

document.getElementById('a').innerHTML +='<ul><li>item1</li><ul>';
大家讲道理
var newele = document.createElement("img");//假定要添加一个img元素
ele.document.appendChild(newele);//这样就给ele元素追加了一个img
Peter_Zhu

你说的是append DOM?

巴扎黑
var p = document.body.createElement('p')
p.innerHTML = 'your html code'
document.body.appendChild(p)
p.outerHTML = p.innerHTML
刘奇

W3School JavaScript HTML DOM 元素(节点)

<p id="p1">
<p id="p1">这是一个段落</p>
<p id="p2">这是另一个段落</p>
</p>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);

var element=document.getElementById("p1");
element.appendChild(para);
</script>
小葫芦

没有,原生的必须要先是一个dom元素,再添加

洪涛

直接innerHTML后面添加啊

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template