使用JavaScript插入HTML元素

Question

使用以下语法时,不要繁琐地搜索每种类型的属性和事件的变通方法:

elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);

有没有办法可以将整个HTML元素声明为字符串？喜欢:

elem = document.createElement("<div id='myID'> my Text </div>");
document.body.insertBefore(elem,document.body.childNodes[0]);

Answer 1

而不是直接搞乱innerHTML它可能更好的是创建一个片段,然后插入:

function create(htmlStr) {
    var frag = document.createDocumentFragment(),
        temp = document.createElement('div');
    temp.innerHTML = htmlStr;
    while (temp.firstChild) {
        frag.appendChild(temp.firstChild);
    }
    return frag;
}

var fragment = create('<div>Hello!</div><p>...</p>');
// You can use native DOM methods to insert the fragment:
document.body.insertBefore(fragment, document.body.childNodes[0]);

优点:

1. 您可以使用本机DOM方法进行插入,例如insertBefore,appendChild等.
2. 您可以在插入之前访问实际的DOM节点; 您可以访问片段的childNodes对象.
3. 使用文档片段非常快; 比在DOM之外创建元素更快,在某些情况下比innerHTML更快.

即使innerHTML在函数中使用,它也都发生在DOM之外,所以它比你想象的要快得多......

Answer 2

你要这个

document.body.insertAdjacentHTML( 'afterbegin', '<div id="myID">...</div>' );

Answer 3

看看insertAdjacentHTML

var element = document.getElementById("one");
var newElement = '<div id="two">two</div>'
element.insertAdjacentHTML( 'afterend', newElement )
// new DOM structure: <div id="one">one</div><div id="two">two</div>

position是相对于您插入的元素的位置:

'beforebegin' 在元素本身之前

'afterbegin' 就在元素里面,在它的第一个孩子之前

'beforeend' 就在元素里面,在它的最后一个孩子之后

'afterend' 元素本身之后

Answer 4

在旧式JavaScript中,你可以这样做:

document.body.innerHTML = '<p id="foo">Some HTML</p>' + document.body.innerHTML;

回应你的评论:

[...]我有兴趣声明新元素的属性和事件的来源,而不是innerHTML元素的来源.

但是,您需要将新的HTML注入DOM中; 这就是为什么innerHTML在旧学校JavaScript示例中使用的原因.在innerHTML该的BODY元素被换成了新的HTML.我们并没有真正触及内部的现有HTML BODY.

我将重写上面的例子来阐明这一点:

var newElement = '<p id="foo">This is some dynamically added HTML. Yay!</p>';
var bodyElement = document.body;
bodyElement.innerHTML = newElement + bodyElement.innerHTML;
// note that += cannot be used here; this would result in 'NaN'

使用JavaScript框架可以使这些代码更简洁,并提高可读性.例如,jQuery允许您执行以下操作:

$('body').prepend('<p id="foo">Some HTML</p>');