Can't Change OuterHTML With Javascript

I have this HTML template on a page:

&

Solution 1:

I assuming the error has occurred : that 'outerHTML' property on 'Element', so element has no parent node.

if you want to create it with new div, then :

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

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

if not : then try this

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>

Solution 2:

You need to insert or append the new_bid div to the document first, then reset its outerHTML.

Share