Question

我有一个由ajax提交的表单。

我正在运行php。

在ajax完成输入后，该条目应更新为我的html。例如

我的HTML代码

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

现在当任何人插入带有5的新条目时，我的html应该用下面的HTML更新。

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
</ul>

提前致谢。

阿维纳什

Answer 1

使用“dollar”函数选择和扩展UL，然后使用MooTool的Element方法之一插入新的LI可能会有效。

http://mootools.net/docs/core/Element/Element#dollar

http://mootools.net/docs/core/Element/Element#Element:inject

Answer 2

我自己做了。

请检查以下代码以获得答案。

// Select UL to append    
var commentUL = $('comment_ul');

//Create new li to insert
    var commentnewLI = new Element('li', {id: 'myFirstElement'});
// Append text to li
    commentnewLI.appendText(responseValueArray[1]);
// Insert li into UL
    commentUL.adopt(commentnewLI);

Mootools的admopt方法对我有用。

但我对此有一些问题。

我的回复在LI中附加了一些HTML。如下所示

Dummy text, Dummy text,Dummy text,<br/><span>User Name</span>

请你在这里说明问题是什么。

由于阿维纳什

Answer 3

我的HTML问题已经解决。

我刚刚更换了

commentnewLI.appendText(responseValueArray[1]);

以下代码。

commentnewLI.innerHTML= responseValueArray[1];

它的工作正常.....

Answer 4

我是这样做的：

//the list
<ul id='the_list'>
  <li>list item 1</li>
  <li>list item 2</li>
  <li id='template_row' class='hidden'>list template. Can have <span class='bold'>HTML</span></li>
</ul>

//get the template
var template = $('template_row');
//create a new row, based on the template
var newRow = new Element('li').set('html', template.innerHTML);
//add it to the list
newRow.inject($('the_list'));

我的模板行包含HTML，并且可以正确呈现。

动态更新Ul Li使用javascript（mootools 1.2）

4 个答案: