Question

我希望我的代码不是用我新创建的跨度创建两个文本，我希望它说＆＃34;一些文本x2＆＃34;然后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，但是当我点击几次时它会出现更多文字。我想要它说＆＃34;有些文字x2＆＃34;代替。

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

由于

Answer 1

这件作品怎么样？

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

http://jsbin.com/munukadama/edit?html,js,output

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

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>

Answer 2

正如迈克所说，你可以用innerHTML做到这一点。如果我明白，你想要的是：

＆＃13;

var i =0;
function doStuff(){
   var proc = "<span> my text instead x"+i + "</span>" ;
   document.getElementById("myLi").innerHTML = proc;
  i++;
}

＆＃13;

<div>
    <li id="myLi">
      <p> something </p>
    </li>
<div>
  
<button onclick="doStuff()"> CLICK ME </button>

＆＃13;

Answer 3

这是一个jQuery解决方案＆amp;一个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);

Javascript添加跨度到li

3 个答案: