Javascript为li添加了span

Javascript add span to li

本文关键字：span 添加 li Javascript      更新时间：2023-09-26

我希望我的代码不要用新创建的span创建两个文本，而是说"Some text x2"，然后是x3，依此类推。

这是我的代码

 <div>
      <li id="myLi">
         Some text  (This is where i want my other text to be instead)
      </li>
 </div>
    <td class="add" onmousedown="myFunction()">Add</td>

当我点击td时，它会添加到li中，但当我点击几次时，它只会出现更多的文本。我希望它改为"一些文本x2"。

   function myFunction() {
var proc = document.createElement("SPAN");
var t = document.createTextNode("Some new text.");
proc.appendChild(t);
document.getElementById("myLi").appendChild(proc);
}

感谢

正如Mike所说，您可以使用innerHTML来完成此操作。如果我理解的话，你想要的是：

var i =0;
function doStuff(){
   var proc = "<span> my text instead x"+i + "</span>" ;
   document.getElementById("myLi").innerHTML = proc;
  i++;
}
<div>
    <li id="myLi">
      <p> something </p>
    </li>
<div>
  
<button onclick="doStuff()"> CLICK ME </button>

这件怎么样？

var globalCounter = 1;
function myFunction(){
  var current = document.getElementById("myLi");
  current.innerHTML = "Some Text x"+globalCounter;
  globalCounter++;
}

http://jsbin.com/munukadama/edit?html，js，输出

请注意，您将使用全局计数器。如果您想避免全局冲突，可以使用唯一的变量名，也可以在类中封装为私有变量（见下文）。

function MyClass(){
    var counter = 1;
    this.update = function(){
        var current = document.getElementById("myLi");
        current.innerHTML = "Some Text x"+counter;
        counter++;
    };
}
var myInstance = new MyClass();

然后按钮将变为：

<button onClick="myInstance.update()">Click me for Class!</button>

这里有一个jQuery解决方案&一个测试它的jsfiddle：

HTML:

<ul>
    <li id="myLi">
       Some text  (This is where i want my other text to be instead)
    </li>
</ul>
<a href="#" class="add">Add</a>

JavaScript:

function myFunction() {
  $('#myLi').html('<span>Some new text.</span>');
}
$('.add').on('click', myFunction);
相关文章：