Question

我试图使用JavaScript将以下代码插入到我的html文件中，我该如何实现？

这是我试图插入的代码：

<div id="divTP2">
  <p>Langages basés sur ECMAScript :</p>

  <ul>
    <li>JavaScript</li>
    <li>JScript</li>
    <li>ActionScript</li>
    <li>EX4</li>
  </ul>
</div>

JavaScript：

var mainDiv = document.createElement('div');
mainDiv.id = 'divTP2';
alert(mainDiv);

var textNodes = [
    document.createTextNode('Langages basés sur ECMAScript :'),
    document.createTextNode('JavaScript'),
    document.createTextNode('JScript'),
    document.createTextNode('ActionScript'),
    document.createTextNode('EX4')
];
alert(mainDiv);

var paragraph = document.createElement('p');
paragraph.appendChild(textNodes[0]);
alert(paragraph);

var tabLi = [
    document.createElement('li'),
    document.createElement('li'),
    document.createElement('li'),
    document.createElement('li')
};

var uList = document.createElement('ul');

for ( var i = 0 ; i < 4 ; i++ ){
    alert(i);
    tabLi[i] = tabLi[i].appendChild(textNodes[i]);
    uList.appendChild(tabLi[i]);
    //alert(tabLi[i]);
}

mainDiv.appendChild(paragraph);
mainDiv.appendChild(uList);

document.body.appendChild(paragraph);
document.body.appendChild(uList);

jsFiddle：http://jsfiddle.net/Qbhqv/

提前致谢。

Answer 1

此块中有错误

var tabLi = [
    document.createElement('li'),
    document.createElement('li'),
    document.createElement('li'),
    document.createElement('li')
};

你打开一个aray []并关闭一个对象{}。使用}更改结束]。

同时更改此块

for ( var i = 0 ; i < 4 ; i++ ){
    alert(i);
    tabLi[i] = tabLi[i].appendChild(textNodes[i]);
    uList.appendChild(tabLi[i]);
    //alert(tabLi[i]);
}

到

for ( var i = 0 ; i < 4 ; i++ ){
    alert(i);
    tabLi[i].appendChild(textNodes[i]);
    uList.appendChild(tabLi[i]);
}

根据你的代码，我认为最后两行

document.body.appendChild(paragraph);
document.body.appendChild(uList);

应该改为

document.body.appendChild(mainDiv);

您可以使用以下代码获得相同的结果

var html = [
    '<p>Langages basés sur ECMAScript :</p>',
    '<ul>',
        '<li>JavaScript</li>',
        '<li>JScript</li>',
        '<li>ActionScript</li>',
        '<li>EX4</li>',
    '</ul>'
];

var mainDiv = document.createElement('div');
mainDiv.id = 'divTP2';
mainDiv.innerHTML = html.join('');

document.body.appendChild(mainDiv);

请参阅jsfiddle

Answer 2

在我看来，这是实现您所做工作的最简单方法。无需对子元素的创建进行微观管理。

var mainDiv = document.createElement('div');
mainDiv.id = 'divTP2';

mainDiv.innerHTML = '<p>Langages basés sur ECMAScript :</p><ul><li>JavaScript</li><li>JScript</li><li>ActionScript</li><li>EX4</li></ul>';

document.body.appendChild(mainDiv);

如果您将其放在<head>中，则应将其包装在onLoad事件中，以便在文档加载节点后添加节点：<\ n / p>

window.onLoad = function(){

  // the code

}

或者，如果您真的想要自动创建列表的过程，请为它创建一个函数：

var mainDiv = document.createElement('div');
mainDiv.id = 'divTP2';

createList(
    mainDiv,
    'Langages basés sur ECMAScript :',
    ['JavaScript', 'JScript', 'ActionScript', 'EX4']
);

document.body.appendChild(mainDiv);

function createList(element, header, items){

    var headerElement = element.appendChild(document.createElement('p'));
    var listElement = element.appendChild(document.createElement('ul'));

    for(var i = 0; i < items.length; i++){

        var itemElement = document.createElement('li');

        itemElement.innerHTML = items[i];
        listElement.appendChild(itemElement);

    }

    headerElement.innerHTML = header;

}

Answer 3

您的代码已修改，并且可以执行您想要的操作：

var mainDiv = document.createElement('div');
mainDiv.id = 'divTP2';

var textNodes = [
    document.createTextNode('Langages basés sur ECMAScript :'),
    document.createTextNode('JavaScript'),
    document.createTextNode('JScript'),
    document.createTextNode('ActionScript'),
    document.createTextNode('EX4')
];

var paragraph = document.createElement('p');
paragraph.appendChild(textNodes[0]);

var tabLi = [
    document.createElement('li'),
    document.createElement('li'),
    document.createElement('li'),
    document.createElement('li')
];

var uList = document.createElement('ul');

for ( var i = 0 ; i < 4 ; i++ ){
    tabLi[i].appendChild(textNodes[i+1]);
    uList.appendChild(tabLi[i]);
    //alert(tabLi[i]);
}

mainDiv.appendChild(paragraph);
mainDiv.appendChild(uList);

document.body.appendChild(mainDiv);

注意i + 1是为了测试节点，因为第一个是在

中。您还必须避免分配给tabLi，因为它会被覆盖。

Answer 4

您有两个错误，一个在此区块中：

var tabLi = [
    document.createElement('li'),
    document.createElement('li'),
    document.createElement('li'),
    document.createElement('li')
};

最后}应为]

第二个是下一个区块：

for ( var i = 0 ; i < 4 ; i++ ){
    tabLi[i] = tabLi[i].appendChild(textNodes[i]);
    uList.appendChild(tabLi[i]);
}

您正在使用li覆盖tabLi[i] = ...元素，因此它只会包含将ul附加li

的文字

将其改为此状态，它将起作用：

var tabLi = [
    document.createElement('li'),
    document.createElement('li'),
    document.createElement('li'),
    document.createElement('li')
];

var uList = document.createElement('ul');

for ( var i = 0 ; i < 4 ; i++ ){
    tabLi[i].appendChild(textNodes[i+1]);
    uList.appendChild(tabLi[i]);
}

见working in jsfiddle

如何正确处理一些HTML标签？

4 个答案: