javascript - 将节点作为字符串插入但保留节点的实例

Question

我想在特定位置插入一个转换为字符串的节点。问题是我想保留或重新获得节点的实例，但不知道如何。

我希望你们中的一些人有解决方案

注意:我必须将元素作为字符串插入!

HTML:

<div class="div">
    Here are <span class="span"></span> some text
</div>

CSS:

.div, .span {
    display: inline-block;
    border: 1px solid #333333;
    width: 200px;
    height: 100px;
}
.span {
    min-width: 10px;
    max-width: 50px;
    height: 50px;
}

JS:

var div = document.querySelector('.div');
var span = document.querySelector('.span');

// element to insert
var newElement = document.createElement('div');
newElement.innerHTML = 'Hallo!';

// convert to string
var converter = document.createElement('div');
converter.appendChild(newElement);

// insert element at the end of span
span.innerHTML = span.innerHTML + converter.innerHTML;

// get the instance of the node? to interact with it
newElement.style.color = '#00ff00';

示例: CODEPEN

Answer 1

我为测试写了一个小函数:

function makeNode(innerHTML){
    var node = document.createElement('div');
    node.id = 'unique_id';
    node.innerHTML = innerHTML;

    document.body.innerHTML += node.outerHTML;

    return document.getElementById('unique_id');
}

创建元素，插入body，返回

var elm = makeNode('test div');

应用一些样式

elm.style = 'color:red;';

试一试:https://jsfiddle.net/nv6gyLve/