1

ページに次の HTML テンプレートがあります。

<div id="bid_wrapper_[[bid_id]]_[[template]]">
    <div class="form_item_block" id="bid_wrapper_[[bid_id]]_[[template]]">
        <div id="bid_delete_[[bid_id]]_[[template]]"><img src="/images/icons/cross.png"></div>
        <div id="bid_label_wrapper_[[bid_id]]_[[template]]">Bid #1</div>
        <div><input type="text" name="bid_summary" id="bid_summary_[[bid_id]]_[[template]]"></div>
        <div><input name="bid_price" id="bid_price_[[bid_id]]_[[template]]"></div>
    </div>
</div>

_[[template]] テキストを取り除き、[[bid_id]] を数値に置き換えようとしています。私はこれを試しました：

var bid_template = document.getElementById('bid_wrapper_[[bid_id]]_[[template]]').cloneNode(true) 
var new_bid_id = 2

var new_oh = bid_template.outerHTML

new_oh = new_oh.replace(/_\[\[template\]\]/g, '')
new_oh = new_oh.replace(/\[\[bid_id\]\]/g, new_bid_id)

この時点で、new_oh を console.log に記録すると、まさに私が望んでいるものです。すべてが正しく置き換えられています。しかし、次の行...

var new_bid = document.createElement('div')
new_bid.outerHTML = new_oh

ここでは、outerHTML を設定しようとしても何も起こりません。innerHTML を設定しても機能しますが、outerHTML を設定することをお勧めします。エラー メッセージは表示されず、outerHTML が設定されていない理由がわかりません。

4

2 に答える 2

3

エラーが発生したと仮定します。「要素」の「outerHTML」プロパティであるため、要素には親ノードがありません。

new で作成する場合は、次のようにしますdiv。

var div = document.createElement('div');

div.innerHTML = output;
document.body.appendChild(div);

そうでない場合：これを試してください 

var bid_template = document.getElementById('bid_wrapper_[[bid_id]]_[[template]]').cloneNode(true);
var new_bid_id = 2;
var parent = document.querySelector('.parent');
var new_oh = bid_template.outerHTML;


var output = new_oh.replace(/_\[\[template\]\]/g, '');
output = output.replace(/\[\[bid_id\]\]/g, new_bid_id);

parent.innerHTML = output;
alert(output)
<div class="parent">
  <div id="bid_wrapper_[[bid_id]]_[[template]]">
    <div class="form_item_block" id="bid_wrapper_[[bid_id]]_[[template]]">
      <div id="bid_delete_[[bid_id]]_[[template]]">
        <img src="/images/icons/cross.png">
      </div>
      <div id="bid_label_wrapper_[[bid_id]]_[[template]]">Bid #1</div>
      <div>
        <input type="text" name="bid_summary" id="bid_summary_[[bid_id]]_[[template]]">
      </div>
      <div>
        <input name="bid_price" id="bid_price_[[bid_id]]_[[template]]">
      </div>
    </div>
  </div>
</div>

于 2016-05-12T15:11:04.567 に答える