2

対応する終了タグを挿入せずに、ページのH1要素の後にいくつかの開始DIVタグを挿入したいと思います（終了タグは、アクセスできない付属のフッターファイルに含まれているため）。

すなわち、既存のコード：

<body>
<h1>Heading One</h1>
... page content...
</div>
</div>
</body>

新しいコード：

<body>    
<h1>Heading One</h1>
<div id="foo">  
<div id="baa">  
... page content...
</div>
</div>
</body>

DOMメソッドはdivを完全な（閉じた）要素として挿入し、「createTextNode」はエスケープ文字を挿入し、「innerHTML」は挿入する要素を必要とします。運が悪ければ、document.writeでスクリプト要素を挿入しようとしたことさえあります。

何かアイデアはありますか（jQueryで十分です）？

更新 以下が機能しました： 

document.body.innerHTML = document.body.innerHTML.replace('</h1>','</h1><div id="foo"><div id="baa">')

Asadが指摘しているように、解決策（もちろん今では明らかなようです）は、DOMメソッドではなくHTMLで文字列メソッドを使用することです。

4

5 に答える 5

3

DOM操作を扱っている場合は、DOM操作メソッドを使用してください。HTML操作を扱っている場合は、文字列操作メソッドを使用してください。

h1.parentElement.innerHTML = h1.parentElement.innerHTML.replace("<h1>Heading One</h1>","<h1>Heading One</h1><div><div>");
于 2012-11-21T16:23:51.680 に答える
0

私はこれがあなたの質問に答えると思います、それはすべて有効なXML形成についてです。

http://www.w3schools.com/xml/xml_syntax.asp

于 2012-11-21T16:20:40.907 に答える
0

DOMメソッドを忘れて、.replace（）を使用して文字列として挿入します。

于 2012-11-21T16:21:48.403 に答える
0

あなたのアプローチは根本的に間違っています。ブラウザは、DOMを認識したとおりに解析し、閉じる必要のあるタグを自動的に閉じます。JavaScriptを使用して開始タグのみを挿入することはできません。

「終了タグは、私がアクセスできない付属のフッターファイルに含まれています」とあなたは言います。開かれていない閉じたタグは無視されます。DOMパーサーに関する限り、これらの閉じたタグは存在しません。

あなたの解決策は次のいずれかです：

  1. 開始タグをヘッダー、またはサーバー側の別の場所に配置するか、または
  2. JavaScriptを使用して、フッターを含む次のすべてのDOM要素と、.wrap()それらすべてを目的のdivに取り込みます。
于 2012-11-21T16:25:18.150 に答える
0

この種の慣習は少し異例のように思えますが、おそらくこのようなものが役立つでしょう。

既存のHTML

<h1 id="testH1">Test H1</h1>
<div id="existingDiv">
    <div id="existingDivContent">Existing Div Content</div>
</div>

新しいHTML

<h1 id="testH1">Test H1</h1>
<div id="newDiv">
    <div id="existingDiv">
        <div id="existingDivContent">Existing Div Content</div>
    </div>
</div>

JS

javascriptはかなり初歩的なものですが、この概念は安全かつ適切に目標を達成するために適用できると思います。

$(document).ready(function() {
    //-- parent node you wish to copy
    var existingDiv = $('#existingDiv');

    //-- new parent div node
    var newDiv = $('<div id="newDiv">');

    //-- where we want to insert the new parent node
    var testH1 = $('#testH1');

    //-- stuff our previous parent node into our new parent node
    newDiv.html(existingDiv);

    //-- insert into the DOM
    testH1.after(newDiv);

});

http://jsfiddle.net/8qzvN/

于 2012-11-21T16:39:55.223 に答える