Javascript 操作 HTML 字符串

Question

我有一个像这样的字符串:

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


现在我想将一些参数切换到 src基于 JavaScript 事件的属性。

please see the JsFiddle

Answer 1

要在字符串中操作 HTML，请创建空元素并使用字符串设置其内容。稍后做你想做的事。

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>