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

このブロックに 1 つずつ、2 つのエラーがあります。

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

最後}は]

2 番目は次のブロックにあります。

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

li要素をで上書きしているため、なしtabLi[i] = ...で追加されるテキストのみが含まれますulli

これに変更すると動作します：

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 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 に答える