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

回答

相關問題