Setting HTML content example

Как вывести переменную из js в html

В самом простом случае, сначала необходимо в html документе дать элементу в который будем помещать данные — id или класс. Например:

    Chair The Laid back     Heigth 80 cm  id="testData">    

Затем, ниже объявленного искомого объекта, в теле тега необходимо с помощью JavaScript «получить» объект и занести в свойство textContent необходимые данные.

 type="text/javascript"> const data = 'new_test_data'; document.getElementById("testData").textContent = data;  

Источник

How to display JavaScript variable value in HTML

This tutorial will show you how to use all three ways to display JavaScript variables in HTML pages. Let’s start with using document.write() method.

Display JavaScript variable using document.write() method

The document.write() method allows you to replace the entire content of HTML tag with HTML and JavaScript expressions that you want to be displayed inside the tag. Suppose you have the following HTML element:

When you run document.write("Hello") method on the HTML piece above, the content of will be replaced as follows:

 Knowing this, you can display any JavaScript variable value by simply passing the variable name as the parameter to document.write() method:

The document.write() method is commonly used only for testing purposes because it will delete any existing HTML elements inside your tag. Mostly, you would want to display a JavaScript variable beside your HTML elements. To do that, you need to use the next method.

Display JavaScript variable using innerHTML property.

Every single HTML element has the innerHTML property which holds the content of that element. The browser allows you to manipulate the innerHTML property by using JavaScript by simply assigning the property to a different value.

For example, imagine you have the following HTML tag:

 You can replace the content of 
tag by first retrieving the element using its identifier. Since the element 
has an id attribute with the value of greeting , you can use document.getElementById method to retrieve it and change its innerHTML property.

The content of 
tag will be changed as follows:

Knowing this, you can simply wrap the space where you want your JavaScript variable to be displayed with a element as follows:

The code above will output the following HTML:

And that’s how you can display JavaScript variable values using innerHTML property.

Display JavaScript variable using window.alert() method

The window.alert() method allows you to launch a dialog box at the front of your HTML page. For example, when you try running the following HTML page:

The following dialog box should appear in your browser:

The implementation for each browser will slightly vary, but they all work the same. Knowing this, you can easily use the dialog box to display the value of a JavaScript variable. Simply pass the variable name to the alert() method as follows:

 The code above will launch a dialog box that displays the value of the name variable.

Conclusion

Displaying JavaScript variables in HTML pages is a common task for web developers. Modern browsers allow you to manipulate the HTML content by calling on exposed JavaScript API methods.

The most common way to display the value of a JavaScript variable is by manipulating the innerHTML property value, but when testing your variables, you can also use either document.write() or window.alert() methods. You are free to use the method that suits you best.

Learn JavaScript for Beginners 🔥

Get the JS Basics Handbook, understand how JavaScript works and be a confident software developer.

A practical and fun way to learn JavaScript and build an application using Node.js.

About

Hello! This website is dedicated to help you learn tech and data science skills with its step-by-step, beginner-friendly tutorials.
Learn statistics, JavaScript and other programming languages using clear examples written for people.

Search

Type the keyword below and hit enter

Tags

Click to see all tutorials tagged with:

Источник

How to display JavaScript variables in a HTML page without document.write

I am trying to display some JavaScript variable on my HTML page. I was first using document.write() but it use to overwrite the current page when the function was called. After searching around, the general consensus was that document.write() isn’t liked very much. What are the other options? I found a page suggesting using .innerHTML but that was written in 2005. A jsFiddle illustrating my problem http://jsfiddle.net/xHk5g/

Using innerHTML is still the easiest way. You can also create a text node and append it to the target node.

9 Answers 9

Element.innerHTML is pretty much the way to go. Here are a few ways to use it:

HTML

JavaScript

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

If you just want to update a portion of a I usually just add an empty element with a class like value or one I want to replace the contents of to the main . e.g.

Then I’d use some code like this:

// 'Modern' browsers (IE8+, use CSS-style selectors) document.querySelector('.content .value').innerHTML = 'World!'; // Using the jQuery library $(".content .value").html("World!"); 

Then the HTML/DOM would now contain:

Full example. Click run snippet to try it out.

// 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

        field is where I'm getting the name from --> Enter your name:  
Plain Javascript Example
Hello World 
jQuery Example
Hello World  

Источник

Как вывести переменную внутри html кода?

не выйдет , нужно именно переменную вывести внутри , как это сделать?

p.s. это не обязательно href атрибут , повторюсь это может быть что угодно , от части имени класса до дата трибута

Надеюсь вы понимаете что код с магией вне Хогвардса использовать нельзя? Как и куда вставлять переменные нужно решать через какие-либо параметры хтмл, просто от балды вставить туда куда надо это полная алохамора. По какому принципу эти переменные должны туда попадать?

повторюсь , КОД ДИНАМИЧЕСКИЙ , это было самое простое решение которое сразу отсеялось. Посему и задан вопрос. Переменную нужно вставить внутрь html , а не наоборот

mrusklon: Вы хотите и рыбку съесть и что бы весь сайт работал на одной функции, так не бывает, есть цель — есть решение, если Вы хотите что бы скрипт еще и определял что он вставляет, куда он вставляет, как он вставляет, то и пишите функцию на 100500 строк, только овчинка выделки не стоит

ну так опишите динамику, что в Вашем понимании «динамический». Вы задали вопрос, я дал ответ. Если он не подходит, значит данных в вопросе не достаточно.

Максим Тимофеев: настолько динамичный что прям мы не знаем как он генерируется , возможно php , возможно что угодно , пришел код с сервера и все

var data = $.naidiChtoNibud(); $('.someConteiner').samReshi(data);

А далее запуск нейросети, обучаем и она принимает решение за Вас. Все просто. Думаю 5 человек и пол года работы и все будет работать.
Подобные попытки предпринимались ранее, благодаря им появились известные решения типа:

Возможно есть и другие решения, но учитывая детальность Вашего ТЗ пока только так.

Источник