字符替换问题

[yCodeM]

还是上次的问题,没有找到结果,现简单的整理下问题类似如下,求解释

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 );  // 输出结果为源字符串,没有替换

[天际的海浪]

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

[yCodeM]

字符串的单引双引是有问题,我里面变双引外面单引,请问下面是为啥无法替换

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 );  // 输出结果为源字符串,没有替换

引用 楼主 yCodeM 的回复:

还是上次的问题,没有找到结果,现简单的整理下问题类似如下,求解释

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 );  // 输出结果为源字符串,没有替换

引用 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>

[天际的海浪]

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();

[yCodeM]

是正确的，谢谢，帮我找到问题所在

/*	
 	注意不要<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 );  

引用 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();

[LYpokerface]

（转）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();