не может изменить outerHTML с JavaScript

Question

У меня есть этот шаблон 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> 

Я пытаюсь вырезать _ [[шаблон]] текст, а также заменить [[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) 

На данный момент, если я console.log new_oh, это именно то, что я хочу - все заменяется правильно. Однако следующие строки ...

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

Ничего не происходит здесь, когда я пытаюсь установить внешнийHTML. Он работает, если я устанавливаю innerHTML, но я бы предпочел установить внешнийHTML. Я не получаю сообщений об ошибках, и я не могу понять, почему он не устанавливает внешнийHTML.

Answer 1

Я предполагаю, что произошла ошибка: это свойство 'outerHTML' в 'Element', поэтому элемент не имеет родительского узла.

, если вы хотите создать его с новым 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>

Answer 2

Вам необходимо вставить или присоединить new_bid div в документ, а затем перезагрузите его externalHTML.