字符替换问题

Question

还是上次的问题,没有找到结果,现简单的整理下问题类似如下,求解释var html = "<ul>"
 +"<li class='li1'><a href='#'>图片1<img></a></li>"
 +"<li class='li2'><a href='#'>图片2<img></a></li>"
 +"<li class='li3'><a href='#'>图片3<img></a></li>"
  +"<ul>";
var addImg = "<a href='#'>图片1_1<img></a>";  // 要添加的元素
  $html = $( html );
 
var oldLi = $html.children( "[class='li1']").html() ;
var newLi = $html.children( "[class='li1']").append( addImg ).html();
html = html.replace(  oldLi,newLi ); // 无法替换 

console.log( oldLi );   // <a href="#">图片1<img></a>
console.log( newLi ); // <a href="#">图片1<img></a><a href="#">图片1_1<img></a>
console.log( html );  // 输出结果为源字符串,没有替换

Answer 1

你html字符串中<a href='#'>是单引号，创建成DOM元素再获取html代码就变成双引号了。
var html = "<ul>"
 +"<li class='li1'><a href='#'>图片1<img></a></li>"
 +"<li class='li2'><a href='#'>图片2<img></a></li>"
 +"<li class='li3'><a href='#'>图片3<img></a></li>"
  +"<ul>";
console.log( oldLi );   // <a href="#">图片1<img></a>

Answer 2

字符串的单引双引是有问题,我里面变双引外面单引,请问下面是为啥无法替换var html = '<ul>'
             +'<li class="li1"><a href="#">图片1<img></a></li>'   
             +'<li class="li2"><a href="#">图片2<img></a></li>'
             +'<li class="li3"><a href="#">图片3<img></a></li>'   
          +"<ul>";
var addImg = '<a href="#">图片1_1<img></a>';  // 要添加的元素
          $html = $( html );
          
    var oldLi = $html.children( "[class='li1']").html() ;   
    var newLi = $html.children( "[class='li1']").append( addImg ).html();
    html = html.replace( 
// oldLi,newLi  可以替换

// 下面无法替换
$html.children( "[class='li1']").html(),
$html.children( "[class='li1']").append( addImg ).html()
); // 无法替换 
     document.write( html );
    console.log( oldLi );   // <a href="#">图片1<img></a>
    console.log( newLi ); // <a href="#">图片1<img></a><a href="#">图片1_1<img></a>
    console.log( html );  // 输出结果为源字符串,没有替换

Answer 3

    var oldLi = $html.children( "[class='li1']").html() ;   
    var newLi = $html.children( "[class='li1']").append( addImg ).html();//你先append( addImg )添加了 addImg
    html = html.replace( 
    $html.children( "[class='li1']").html(),//再获取就是添加 addImg后的值了
    $html.children( "[class='li1']").append( addImg ).html()
    ); // 无法替换 要把这再行删除
   var oldLi = $html.children( "[class='li1']").html() ;   
   var newLi = $html.children( "[class='li1']").append( addImg ).html();

Answer 4

是正确的，谢谢，帮我找到问题所在
/*
  注意不要<img/>,找到该元素的子元素进行替换时浏览器不会识别img的/标签
var html = '<ul>'
             +'<li class="li1"><a href="#">图片1<img/></a></li>'   
             +'<li class="li2"><a href="#">图片2<img/></a></li>'
             +'<li class="li3"><a href="#">图片3<img/></a></li>'   
          +"<ul>";
若这样还是无法正确替换   
*/ // 下面可替换
var html = '<ul>'
             +'<li class="li1"><a href="#">图片1<img></a></li>'   
             +'<li class="li2"><a href="#">图片2<img></a></li>'
             +'<li class="li3"><a href="#">图片3<img></a></li>'   
          +"<ul>"; 
  
var addImg = '<a href="#">图片1_1<img></a>';  // 要添加的元素
          $html = $( html );
          
var oldLi = $html.children( "[class='li1']").html() ;   
var newLi = $html.children( "[class='li1']").append( addImg ).html();
    html = html.replace( 
 oldLi,
 newLi  //可以替换
 
// $html.children( "[class='li1']").html(),
// $html.children( "[class='li1']").append( addImg ).html()
);   console.log( oldLi );   // <a href="#">图片1<img></a>  浏览器输出img标签时是不会带/结束
console.log( newLi ); // <a href="#">图片1<img></a><a href="#">图片1_1<img></a>
    console.log( html );  

Answer 5

（转）var oldLi = $html.children( "[class='li1']").html() ;   
    var newLi = $html.children( "[class='li1']").append( addImg ).html();//你先append( addImg )添加了 addImg
    html = html.replace( 
    $html.children( "[class='li1']").html(),//再获取就是添加 addImg后的值了
    $html.children( "[class='li1']").append( addImg ).html()
    ); // 无法替换 要把这再行删除
   var oldLi = $html.children( "[class='li1']").html() ;   
   var newLi = $html.children( "[class='li1']").append( addImg ).html();