Question

使用vanilla JS时，这是我创建元素并在页面上呈现它的典型方法：

var span = document.createElement('span');
    span.className = 'someClass';
    span.innerHTML = 'Lorem ipsum';

document.body.appendChild(span);

使用jQuery，您可以执行类似

的操作

$('body').append('<span class="someClass">Lorem ipsum</span>')

是否有更简洁的版本可用于纯JS？

Answer 1

不确定

document.body.insertAdjacentHTML('beforeend', '<span class="someClass">Lorem ipsum</span>');

Answer 2

这可能是你所追求的（不是最好的）：

document.body.appendChild((((t = document.createElement("span")).className="someClass"),t)).innerHTML = "Lorem ipsum";

它为t分配一个新元素，设置className，然后将t传递给appendChild方法，最后设置innerHTML

以下内容也可能有效：

document.body.appendChild(t = document.createElement("span"),t.innerHTML="yea",t.style.backgroundColor="#F00",t)

Answer 3

我最终经常使用的方法是：

var el = '<div class="class-name">content</div>';
document.body.innerHTML = el;

但请记住，在这个例子中，整个<body> html正在被替换。它只适用于您定位更具体的容器，如

document.getElementById('container').innerHTML = el;

编辑发现this queston更长时间地讨论同一问题。 Here's another that looks to be a duplicate of this，答案与我的相似。

虽然我不理会这两个因为@ Jonathon的答案看起来很棒。