2013-08-30 4 views
0

Я хочу отобразить текст из строки в тег HTML, не переходя на следующую страницу и не отображать его.Как изменить тег html с помощью Javascript?

<body> 
<div> 
    <label id="lbl1">Label </label> 
    <button id="btn1" onclick="display()">Click </button> 
    <script> 
    function display() { 
     var str="Hello World"; 
     document.write(str); 
    } 
</script> 
</div> 
</body> 

Как отредактировать содержимое метки метки?

+1

Если это только текст, вы можете переписать содержимое ярлыка на 'var target = document.getElementById (" lbl1 "); while (target.firstChild) {target.removeChild (target.firstChild); } target.appendChild (document.createTextNode (str)); ' – Ian

ответ

5

Common ...

document.getElementById('lbl1').innerHTML = str; 
+0

спасибо ... Я пытался таким образом ... document.getElementById (lbl1) .text = str – vishalkin

+0

@Ин метод в комментариях лучше всего, если просто нужен текст. См. [Вопросы безопасности элемента element.innerHTML] (https://developer.mozilla.org/en-US/docs/Web/API/element.innerHTML) – Xotic750

0
function display() { 
    var str="Hello World"; 
    var label = document.getElementById('lbl1'); 
    label.innerHTML = str; 
} 
0

Используйте document.getElementById("lbl1").innerHTML = display(); и добавьте оператор возврата внутри функции:

function display() 
{ 
    var str="Hello World"; 
    return str; 
} 

Вы редактировать содержимое аналогичным образом: document.getElementById("lbl1").innerHTML = "New content...";.

Вы также можете изменить ваш display() функция немного, чтобы получить желаемый результат:

function display() 
{ 
    var str="Hello World"; 
    var label = document.getElementById("lbl1"); 
    label.innerHTML = str; 
} 

Другой способ:

window.onload = function() 
{ 
    var button = document.getElementById("btn1"); 
    button.onclick = function() 
    { 
    document.getElementById("lbl1").innerHTML = "Hello World"; 
    } 
} 

Последний способ является наиболее желанной и это лучше поставить Код JavaScript внутри другого файла и присоединить его через атрибут src элемента script.

Давайте обеспечить полный пример:

<!DOCTYPE html> 
<html> 
    <head> 
    <script type="text/javascript" src="script.js"></script> 
    </head> 
    <body> 

    <label id="lbl1">Label </label> 
    <button id="btn1">Click </button> 

    </body> 
</html> 

Затем в файл JavaScript вы просто зарегистрировать различные события:

//JavaScript 

window.onload = function() //You have to ensure that everything has loaded 
{ 
    var button = document.getElementById("btn1"); 
    button.onclick = function() 
    { 
    document.getElementById("lbl1").innerHTML = "Hello World"; 
    } 
} 

это обычно считается лучшим способом для регистрации событий в отдельном файле JavaScript, потому что производительности и простоты обслуживания. Вы можете узнать больше об этом here.

0
<body> 
<div> 
    <label id="lbl1">Label </label> 
    <button id="btn1" onclick="display()">Click </button> 
    <script> 
    function display() { 
     var str="Hello World"; 
     var label = document.getElementById("lbl1"); 
     label.innerText = str; 
    } 
</script> 
</div> 
</body> 

При нажатии на кнопку, функция отображения() выполняется, и текст на этикетке тега изменяется на «Hello World».

Смежные вопросы