can't change outerHTML with javascript

Question

I have this HTML template on a page:

<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>

I'm trying to strip out the _[[template]] text, and also replace the [[bid_id]] with a number. I tried this:

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)

At this point if I console.log new_oh, it is exactly what I want - everything is replaced correctly. However the next lines...

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

Nothing happens here when I try to set the outerHTML. It does work if I set the innerHTML, but I would prefer to set the outerHTML. I don't get any error messages, and I can't figure out why it's not setting the outerHTML.

Answer 1

我假设发生了错误：“Element”上的“outerHTML”属性，因此元素没有父节点。

如果你想用 new 创建它div，那么：

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

div.innerHTML = output;
document.body.appendChild(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)