CODEWITHSUNDEEP
javascriptjquery
mohammad
mohammad

Reputation: 1026

Javascript manipulate HTML string

I have a string like this:

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

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

please see the JsFiddle

Upvotes: -1

Views: 187

Answers (1)

Justinas
Justinas

Reputation: 43479

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>

Upvotes: 1

Related Questions