Javascript manipulate HTML string

Question

I have a string like this:

 <iframe src="http://example.go2cloud.org/aff_l?offer_id=90" scrolling="no" frameborder="0" width="1" height="1"></iframe>  godaddy

Now I wanna to toggle some parameter into src attribute based on a javascript event.

please see the JsFiddle

@gaetanoM fiddle seems fine to me – Carsten Løvbo Andersen Jun 14 '17 at 11:18 — Carsten Løvbo Andersen, Jun 14 '17 at 11:18
@CarstenLøvboAndersen Yes, the link now works. Thanks – gaetanoM Jun 14 '17 at 11:18 — gaetanoM, Jun 14 '17 at 11:18

Justinas · Answer 1 · 2017-06-14T11:51:20.703

To manipulate HTML in string create empty element and set it's content with string. Later do what you want.

var string = '<!-- Offer Conversion: godaddy --> <iframe src="http://example.go2cloud.org/usr_l?offer_id=90" scrolling="no" frameborder="0" width="1" height="1"></iframe> <!-- // End Offer Conversion -->';

$('input').change(function() {
  var content = $('<div>');
  content.html(string);
  var iFrameSrc = content.find('iframe').attr('src');

  if ($('#e1').is(':checked')) {
      iFrameSrc += '&e1='+$('#e1').val();
  }

  if ($('#e2').is(':checked')) {
      iFrameSrc += '&e2='+$('#e2').val();
  }
    content.find('iframe').attr('src', iFrameSrc);

  $('#result').show().text(content.html().replace(/&amp;/g, '&'));
});

#result {
  margin-top: 50px;
  background: #dcfffb;
  color: #044f47;
  padding: 10px;
  font-size: 1em;
  font-family: monospace !important;
  text-align: left;
  direction: ltr;
  border: 1px dotted #9dd3cd;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input id="e1" type="checkbox" value="someValue1"/>
  <label for="e1">firstParam</label>
</div>

<div>
  <input id="e2" type="checkbox" value="someValue2"/>
  <label for="e2">secondParam</label>
</div>

<div id="result"></div>

& is the character reference for "An ampersand". https://stackoverflow.com/questions/9084237/what-is-amp-used-for — Aiwass 418, Jun 14 '17 at 11:29

Javascript manipulate HTML string

1 Answers1