Javascript createElement，修改输出

我为我的网站下载了一个LiveSearchJavaScript插件，它正在运行，但我需要一些帮助来修改它

代码如下：

    $.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 ) {
                var eImg = document.createElement( 'span' );
                eImg.className = "img_container";
                var img = new Image();
                img.src = result[i].img;
                eImg.appendChild( 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">
  <a href="http://url">           <---- <a> tag here
  <span class="img_container">
    <img src="http://url.jp">
  </span>
  <span class="product-container">    <------ <span> tag here
    <span class="title">MONS 1.0 (CTM 2013)</span> <------ <span> tag here, remove <a> tag
    <span class="description">Description...</span> <------ <span> tag here
  </div>
  </a>
  </li>

这超出了我的知识范围

---

非常感谢您

关于这是未经测试的严格免责声明，我会说是的

代码被整齐地划分，便于阅读，让我们保持这种精神

在顶部，我们看到以下内容：

var eList = document.createElement( 'ul' );
eList.id = 'livesearch_search_results';
var eListElem;
var eLink;
var eHref;

这些变量已声明但未定义。它们将被反复用于构建每个

。我们正在移动链接（

eLink

），这样我们就可以离开了，但我们也在将

更改为

，以及添加其他几个元素；即产品容器、标题和描述。在这里，让我们为这些设置一些变量（原始作者似乎没有在这里定义

eDiv

，无论如何，我们将用

ePCont

替换它）：

下一步是双重的

首先，我们看到一堆

document.createElement

s（一些在if语句中，一些不在if语句中）

document.createElement

生成指定类型的新DOM元素。它不会将元素添加到文档中，它只构建元素的一个实例，因此它们的创建顺序无关紧要。这就引出了第二部分：

[element].appendChild（[element]）

将树中的一个元素放在另一个元素下。如果该树中的某个元素属于文档，则将显示该元素。这意味着首先我们将创建一系列对象，然后将它们相互添加，最后将最顶层的元素添加到文档中

我们将彻底重写这段代码的大部分，但第一部分（直到创建图像的地方）很好：

        eListElem = document.createElement( 'li' );
        eLink = document.createElement( 'a' );
        if( result[i].img != null ) {
            var eImg = document.createElement( 'span' );
            eImg.className = "img_container";
            var img = new Image();
            img.src = result[i].img;
            eImg.appendChild( img );
        }
        else {
            eImg = document.createElement( 'span' );
            eImg.innerHTML = ' ';
        }

下一行定义了我们现在称之为

ePCont

的容器div，让我们适当地重写它（并给它一个类）：

之后的行将在链接中放置一些文本。我们将在其中添加一个元素，这样我们就可以安全地删除它，但之后的if语句（确保我们将使用犹太url）将保留：

最后，让我们创建两个新跨距：

eTitle = document.createElement( 'span' );
eDesc = document.createElement( 'span' );

并填充它们：

eTitle.appendChild( document.createTextNode(result[i].name) );
eDesc.appendChild( document.createTextNode(result[i].desc) );

并设置课程：

ePCont.className = "title";
ePCont.className = "description";

现在是将所有内容附加到其他内容的时候了。我们将从最低的元素开始，然后向上努力

ePCont.appendChild(eTitle);
ePCont.appendChild(eDesc);
eLink.appendChild(eImg);
eLink.appendChild(ePCont);
eListElem.appendChild(eLink);

文档的其余部分应该或多或少地按原样流动：

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

    ...

---

同样，完全未经测试，但我希望我的描述能让您充分了解此插件的工作原理，从而排除故障

我认为你可以这样做，但不太可能有你想要的效果，

DIV

元素是，而

A

元素不是。另外，为什么要在

LI

的末尾添加

BR

，只需使用CSS来填充it@JasonSperske我想整个

都可以点击，应该是显示：block；BR来自原始代码，我已将其删除。：）是的，谢谢你的详细介绍。现在清楚了。我认为您在这里输入了一个小错误：ePCont.className=“title”；ePCont.className=“说明”——>它应该是eTitle.className=“livetitle”；eDesc.className=“实时描述”；再次，非常感谢。根据您最初的规范，类名是“title”和“description”，但很明显，您已经很好地了解了您所需要的内容！请随时提出您可能有的任何其他问题！还有一个问题：如果我想在

之后创建一个div（eList.appendChild（eListElem）；-如果我是正确的，那么这段代码为什么不起作用？var三角；三角形=document.createElement（'div'）；tRiangle.className=“tRiangle”；三角形。附加子对象（三角形）；哈，你在给自己添加

tRiangle

。您要做的是

eList.appendChild（三角形）

。对不起，我说错了。我只想要一个。与eList.appendChild在每次

eTitle.appendChild( document.createTextNode(result[i].name) );
eDesc.appendChild( document.createTextNode(result[i].desc) );

ePCont.className = "title";
ePCont.className = "description";

ePCont.appendChild(eTitle);
ePCont.appendChild(eDesc);
eLink.appendChild(eImg);
eLink.appendChild(ePCont);
eListElem.appendChild(eLink);

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

    ...