我有一个表示元素的HTML字符串:“<li>text</li>”。我想将它附加到DOM中的一个元素(在我的例子中是一个ul)。如何使用Prototype或DOM方法做到这一点?

(我知道我可以在jQuery中轻松做到这一点,但不幸的是,我们没有使用jQuery。)


当前回答

实际上,我想我会分享我想出的这个过于复杂但又简单的方法。。。也许有人会发现有用的东西。

/*Creates a new element - By Jamin Szczesny*/
function _new(args){
    ele = document.createElement(args.node);
    delete args.node;
    for(x in args){ 
        if(typeof ele[x]==='string'){
            ele[x] = args[x];
        }else{
            ele.setAttribute(x, args[x]);
        }
    }
    return ele;
}

/*You would 'simply' use it like this*/

$('body')[0].appendChild(_new({
    node:'div',
    id:'my-div',
    style:'position:absolute; left:100px; top:100px;'+
          'width:100px; height:100px; border:2px solid red;'+
          'cursor:pointer; background-color:HoneyDew',
    innerHTML:'My newly created div element!',
    value:'for example only',
    onclick:"alert('yay')"
}));

其他回答

迟到了,但只是一个音符;

可以将一个简单的元素作为容器添加到目标元素中,并在使用后将其删除。

//测试铬23.0,萤火虫18.0,即7-8-9和歌剧12.11。

<div id="div"></div>

<script>
window.onload = function() {
    var foo, targetElement = document.getElementById('div')
    foo = document.createElement('foo')
    foo.innerHTML = '<a href="#" target="_self">Text of A 1.</a> '+
                    '<a href="#" onclick="return !!alert(this.innerHTML)">Text of <b>A 2</b>.</a> '+
                    '<hr size="1" />'
    // Append 'foo' element to target element
    targetElement.appendChild(foo)

    // Add event
    foo.firstChild.onclick = function() { return !!alert(this.target) }

    while (foo.firstChild) {
        // Also removes child nodes from 'foo'
        targetElement.insertBefore(foo.firstChild, foo)
    }
    // Remove 'foo' element from target element
    targetElement.removeChild(foo)
}
</script>

实际上,我想我会分享我想出的这个过于复杂但又简单的方法。。。也许有人会发现有用的东西。

/*Creates a new element - By Jamin Szczesny*/
function _new(args){
    ele = document.createElement(args.node);
    delete args.node;
    for(x in args){ 
        if(typeof ele[x]==='string'){
            ele[x] = args[x];
        }else{
            ele.setAttribute(x, args[x]);
        }
    }
    return ele;
}

/*You would 'simply' use it like this*/

$('body')[0].appendChild(_new({
    node:'div',
    id:'my-div',
    style:'position:absolute; left:100px; top:100px;'+
          'width:100px; height:100px; border:2px solid red;'+
          'cursor:pointer; background-color:HoneyDew',
    innerHTML:'My newly created div element!',
    value:'for example only',
    onclick:"alert('yay')"
}));

可以使用以下方法从字符串创建有效的DOM节点:

document.createRange().createContextualFragment()

以下示例在页面中添加一个按钮元素,从字符串中获取标记:

让html='<button type=“button”>单击我</按钮>';let fragmentFromString=函数(strHTML){return document.createRange().createContextualFragment(strHTML);}let fragment=fragmentFromString(html);document.body.appendChild(片段);

以下是如何使用PrototypeJS(正如OP 12年前最初要求的那样):

HTML格式:

<ul id="mylist"></ul>

JS:

$('mylist').insert('<li>text</li>');

注意,这不是jQuery!

HTML5和ES6

<模板>

Demo

“使用严格”;/****@作者xgqfrms*@许可证MIT*@版权xgqfrms*@description HTML5模板*@扩增*@示例**//*<模板><h2>鲜花</h2><img src=“https://www.w3schools.com/tags/img_white_flower.jpg"></template><模板><div class=“myClass”>我喜欢:</div></template>*/常量showContent=()=>{//let temp=document.getElementsByTagName(“template”)[0],let temp=document.querySelector(`[data tempalte=“tempalte img”]`),clone=临时内容克隆节点(true);document.body.appendChild(克隆);};const templateGenerator=(datas=[],debug=false)=>{让result=``;//let temp=document.getElementsByTagName(“template”)[1],let temp=document.querySelector(`[data tempalte=“tempalte links”]`),item=temp.content.querySelector(“div”);for(设i=0;i<data.length;i++){let a=document.importNode(item,true);a.textContent+=数据[i];document.body.appendChild(a);}返回结果;};const arr=[“奥迪”、“宝马”、“福特”、“本田”、“捷豹”、“日产”];if(document.createElement(“template”).content){console.log(“是!浏览器支持模板元素”);模板生成器(arr);setTimeout(()=>{showContent();}, 0);}其他{console.error(“否!浏览器不支持模板元素”);}@字符集“UTf-8”;/*测试.css*/:根目录{--颜色:#000;--默认cololr:#fff;--新的cololr:#0f0;}[数据class=“links”]{颜色:白色;背景色:道奇蓝;填充:20px;文本对齐:居中;边距:10px;}<!DOCTYPE html><html lang=“zh-Hans”><head><meta charset=“UTF-8”><meta name=“viewport”content=“width=设备宽度,初始比例=1.0”><meta http equiv=“X-UA-Compatible”content=“ie=edge”><title>模板测试</title><!--[如果lt IE 9]><script src=“https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js“></script><![endif]--></head><body><章节><h1>模板测试</h1></section><template data tempalte=“tempalte img”><h3>花卉图像</h3><img src=“https://www.w3schools.com/tags/img_white_flower.jpg"></template><template data tempalte=“tempalte links”><h3>链接</h3>我喜欢:</div></template><!-- js--></body></html>