0

我正在尝试使用 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/

提前致谢。

4

4 回答 4

0

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

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事件中，以便它在文档加载它的元素后添加节点：

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;

}
于 2013-09-20T08:25:00.977 回答
0

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

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 为 testNodes 拉屎，因为第一个在

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

于 2013-09-20T08:26:22.990 回答
0

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

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]);
}

看到它在 jsfiddle 中工作

于 2013-09-20T08:28:37.273 回答
0

您在此块中有错误

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

你打开一个数组[]，你关闭一个对象{}。用更改}结尾]。

也改变这个块

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

于 2013-09-20T08:24:01.570 回答