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>