我为我的网站下载了一个 livesearch javascript 插件,它可以正常工作,但我需要帮助对其进行一些修改。
这是代码:
$.ajax({url: $('base').attr('href') + 'index.php?route=product/search/ajax&keyword=' + keywords, dataType: 'json', type: 'GET', success: function(result) {
if( result.length > 0 ) {
var eList = document.createElement( 'ul' );
eList.id = 'livesearch_search_results';
var eListElem;
var eLink;
var eHref;
for( var i in result ) {
eListElem = document.createElement( 'li' );
eLink = document.createElement( 'a' );
if( result[i].img != null ) {
eImg = new Image();
eImg.src = result[i].img;
}
else {
eImg = document.createElement( 'span' );
eImg.innerHTML = ' ';
}
eDiv = document.createElement( 'div' );
eLink.appendChild( document.createTextNode(result[i].name) );
if( typeof(result[i].href) != 'undefined' ) {
eHref = result[i].href;
}
else {
eHref = $('base').attr('href') + 'index.php?route=product/product&product_id=' + result[i].product_id + '&keyword=' + keywords;
}
eLink.href = eHref;
eDiv.appendChild( eLink );
eDiv.innerHTML = eDiv.innerHTML + result[i].desc;
eListElem.appendChild( eImg );
eListElem.appendChild( eDiv );
eListElem.appendChild( document.createElement('br') );
eListElem.setAttribute( 'rel', eHref );
$(eListElem).bind('click', function(){
var gto = $(this).attr( 'rel' );
try {
if( gto != false && gto.length > 0 ) {
document.location = gto;
}
}
catch( e ) {}
});
eList.appendChild( eListElem );
}
if( $('#livesearch_search_results').length > 0 ) {
$('#livesearch_search_results').remove();
}
$('#search_menu').append(eList);
}
}});
输出是这样的:
<li rel="http://url"><img src="http://url.jpg">
<div><a href="url">TITLE</a>Description</div>
<br></li>
有没有办法在标签中添加元素?像这样:
<li rel="http://url"> <span class="img_container"><img src="http://url.jpg"> </span>
<div><a href="url">TITLE</a>Description</div>
<br></li>
我知道,我可以用 来创建一个标签document.createElement( 'span' )
,但我不知道在这种情况下到底要去哪里。