Javascript将范围添加到li

我希望我的代码不是使用新创建的跨度创建两个文本，而是希望它说“某些文本x2”，然后是x3等等。Javascript将范围添加到li

继承人我的代码

<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，将其添加到李但是当我点击几次它只是谈到更多的文本。我想让它说“一些文字x2”。

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

感谢

来源

2016-03-28 Eivind Bergman

你熟悉[？'.innerHTML'（https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML）你问题就来了从每次调用时都添加文本节点的事实来看。相反，你应该替换现有的内容。 –

是的，我听说.innerHTML，但我不知道我会如何实现它：/ –

阅读我链接到的页面上的示例。这并不难。 –

正如迈克说，你可以用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>

来源

2016-03-28 21:53:03 Folkvir

'i'是一个危险的变量，因为他可能会在页面的其他地方使用它。最好创建一个唯一的变量名称，例如'textAdded'或其他。另外，首先点击它说'我的文字，而不是没有多大意义的x0';更好地检查'textAdded> 0'并在这之后添加'x＃'。 –

是的你是对的，但它是为了这个例子。 :) – Folkvir

我知道，这个评论对Eivind来说比你的更重要。 –

这个怎么样的作品呢？

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>

来源

2016-03-28 21:52:23 Sherzod

这并没有回答他如何计算按钮按下的次数的问题。 –

哦错过了那部分..编辑答案包括 – Sherzod

这里是一个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>

J avaScript：

function myFunction() { 
    $('#myLi').html('<span>Some new text.</span>'); 
} 

$('.add').on('click', myFunction);

来源

2016-03-28 21:59:13 Clomp

Javascript将范围添加到li

回答

相关问题