在外部div中更改文本時刪除跨度

我想要一個文本並右鍵創建一個圖像（箭頭向上或向下）。我用這個代碼：在外部div中更改文本時刪除跨度

<div id="more-time1" class="small-text-size ">more time<span id="arr-icon" class="accordion_down"></span></div>

外部DIV保持文本和內部跨度具有圖像（圖像數據是在類）。當我改變div的文本：

var moreTime = document.getElementById("more-time1"); 
moreTime.innerHTML = "less time";

它刪除跨度，除非我一個新跨越添加每次它，我不能改變它的形象。

我的問題是：每次我是否需要添加跨度，或者我可以有更好的設計，哪些更改文本不會影響跨度？或者也許是其他解決方案

來源

2015-12-14 Dror

當您設置div的.innerHTML時，您正在編寫其全部內容。這意味着您正在覆蓋圖像範圍。

將文字放入範圍，以便您可以將文字與div內的圖像分開定位。

<div id="more-time1" class="small-text-size "> 
    <span class="more-time1-text">more time</span> 
    <span id="arr-icon" class="accordion_down"></span> 
</div> 

var moreTime = document.getElementById("more-time1-text"); 
moreTime.innerHTML = "less time";

來源

2015-12-14 09:10:35

謝謝，完美的作品，簡單 – Dror

你應該將你的文字放在一個額外的標籤內，然後對其進行操作。

HTML：

<div id="more-time1" class="small-text-size "> 
    <span id="my-text">more time</span> 
    <span id="arr-icon" class="accordion_down"></span> 
</div>

JS：

var moreTime = document.getElementById("my-text"); 
    moreTime.innerHTML = "less time";

來源

2015-12-14 09:11:20

簡單明瞭 – Dror

下面豐富的期望結果使用代碼：

var moreTime = document.getElementById("more-time1"); 
moreTime.childNodes[0].nodeValue = "Desired text"

解釋：在代碼段中您訪問的第一個孩子節點more-time1元素（它是textNode）並修改該節點的值。

更新： 根據下面發表評論我要改變你的元素中文字，你可以開始for環比childNodes：

for (var latestTextNode, i=0; i < moreTime.childNodes.length; i++){ 
    if (moreTime.childNodes[i].nodeType == 3) { 
    moreTime.childNodes[i].nodeValue = ''; 
    // keep link to latest text node to alter text later 
    latestTextNode = moreTime.childNodes[i]; 
    } 
}; 
latestTextNode && latestTextNode.nodeValue = 'Desired text';

來源

2015-12-14 09:11:26

這不是一個理想的解。如果更多的元素被添加到div，此代碼可能會中斷。 –

greate評論，謝謝，回答更新。 –

在外部div中更改文本時刪除跨度

回答

相關問題