Как отобразить переменные JavaScript на странице HTML без document.write - PullRequest
Новая
       2

Как отобразить переменные JavaScript на странице HTML без document.write

60 голосов
/ 13 марта 2012

Я пытаюсь отобразить некоторую переменную JavaScript на моей странице HTML.

Я впервые использовал document.write(), но он использовал для перезаписи текущей страницы при вызове функции.

После поиска вокруг, общее согласие было, что document.write() не очень понравился. Какие есть другие варианты?

Я нашел страницу, предлагающую использовать .innerHTML, но она была написана в 2005 году.

jsFiddle, иллюстрирующий мою проблему http://jsfiddle.net/xHk5g/

Ответы [ 9 ]

93 голосов
/ 13 марта 2012

Element.innerHTML в значительной степени путь. Вот несколько способов его использования:

HTML 

<div class="results"></div>

JavaScript 

// 'Modern' browsers (IE8+, use CSS-style selectors)
document.querySelector('.results').innerHTML = 'Hello World!';

// Using the jQuery library
$('.results').html('Hello World!');

Если вы просто хотите обновить часть <div>, я обычно просто добавляю пустой элемент с классом, таким как value или один, который я хочу заменить содержимым, на основной <div>. например, 

<div class="content">Hello <span class='value'></span></div>

Тогда я бы использовал такой код: 

// 'Modern' browsers (IE8+, use CSS-style selectors)
document.querySelector('.content .value').innerHTML = 'World!';

// Using the jQuery library
$(".content .value").html("World!");

Тогда HTML / DOM теперь будет содержать: 

<div class="content">Hello <span class='value'>World!</span></div>

Полный пример. Нажмите «Запустить фрагмент», чтобы попробовать. 

// Plain Javascript Example
var $jsName = document.querySelector('.name');
var $jsValue = document.querySelector('.jsValue');

$jsName.addEventListener('input', function(event){
  $jsValue.innerHTML = $jsName.value;
}, false);


// JQuery example
var $jqName = $('.name');
var $jqValue = $('.jqValue');

$jqName.on('input', function(event){
  $jqValue.html($jqName.val());
});
html {
  font-family: sans-serif;
  font-size: 16px;
}

h1 {
  margin: 1em 0 0.25em 0;
}

input[type=text] {
  padding: 0.5em;
}

.jsValue, .jqValue {
  color: red;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Setting HTML content example</title>
</head>
<body>
  <!-- This <input> field is where I'm getting the name from -->
  <label>Enter your name: <input class="name" type="text" value="World"/></label>
  
  <!-- Plain Javascript Example -->
  <h1>Plain Javascript Example</h1>Hello <span class="jsValue">World</span>
  
  <!-- jQuery Example -->
  <h1>jQuery Example</h1>Hello <span class="jqValue">World</span>
</body>
</html>
13 голосов
/ 13 марта 2012

Вы можете использовать javascript для доступа к элементам на странице и изменения их содержимого.Так, например, у вас может быть страница с некоторой HTML-разметкой, например, так: 

<div id="MyEdit">
    This text will change
</div>

Вы можете использовать javascript для изменения содержимого следующим образом ... 

document.getElementById("MyEdit").innerHTML = "My new text!";​

Здесьявляется рабочим примером

Вы также можете использовать библиотеку Javascript JQuery для манипулирования DOM, у нее есть несколько замечательных функций, позволяющих сделать такие вещи очень простыми.

Например, с JQuery вы можете сделать это, чтобы получить тот же результат ... 

$("#MyEdit").html("My new text!");

Вот рабочий пример версии JQuery

На основании этого примера вы указали в своем посте.Следующий JQuery будет работать для вас: 

var x = "hello wolrd";
$("p").html(x);

Вот рабочая версия

Использование тега P, подобного этому, однако не рекомендуется.В идеале вы хотели бы использовать элемент с уникальным идентификатором, чтобы убедиться, что вы выбираете правильный элемент с помощью JQuery.

5 голосов
/ 10 февраля 2014

Есть разные способы сделать это. Одним из способов было бы написать скрипт, извлекающий команду. вот так: 

var name="kieran";
document.write=(name);

или мы можем использовать способ JavaScript по умолчанию для его печати. 

var name="kieran";
document.getElementById("output").innerHTML=name;

and the html code would be: 

<p id="output"></p>

Надеюсь, это помогло:)

3 голосов
/ 13 марта 2012

Вы можете использовать jquery, чтобы получить элемент html, с которым вы хотите загрузить значение.

Скажем, например, если ваша страница выглядит примерно так, 

<div id="FirstDiv">
  <div id="SecondDiv">
     ...
  </div>
 </div>

Иесли ваш javascript (я надеюсь) выглядит так просто, 

function somefunction(){
  var somevalue = "Data to be inserted";
  $("#SecondDiv").text(somevalue);
}

Надеюсь, это то, что вы искали.

2 голосов
/ 13 марта 2012

Если вы хотите избежать innerHTML, вы можете использовать методы DOM для создания элементов и добавления их на страницу. 

​var element = document.createElement('div');
var text = document.createTextNode('This is some text');
element.appendChild(text);
document.body.appendChild(element);​​​​​​
2 голосов
/ 13 марта 2012

innerHTML в порядке и все еще действует.Используйте это все время на проектах больших и маленьких.Я просто переключился на открытую вкладку в моей IDE, и там была одна.

 document.getElementById("data-progress").innerHTML = "<img src='../images/loading.gif'/>";

В манипуляциях с js + dom с 2005 года мало что изменилось, кроме добавления большего количества библиотек.Вы можете легко установить другие свойства, такие как 

   uploadElement.style.width = "100%";
1 голос
/ 08 мая 2013

привет, вот простой пример: <div id="test">content</div> и 

var test = 5;
document.getElementById('test').innerHTML = test;

, и вы можете проверить это здесь: http://jsfiddle.net/SLbKX/

0 голосов
/ 03 сентября 2015

Аналогично выше, но я использовал (это было в CSHTML):

JavaScript: 

var value = "Hello World!"<br>
$('.output').html(value);

CSHTML: 

<div class="output"></div>
0 голосов
/ 13 марта 2012

Добавьте элемент на свою страницу (например, div) и напишите в этот div.

HTML: 

<html>
    <header>
        <title>Page Title</title>
    </header>

    <body>
        <div id="myDiv"></div>
    </body>
</html>

JQuery: 

$('#myDiv').text('hello world!');

JavaScript: 

document.getElementById('myDiv').innerHTML = 'hello world!';
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...