Title

.inner H T M L

Свойство inner H T M L позволяет считать содержимое элемента в виде HTML-строки или установить новый HTML.

Новое значение HTML необходимо передавать в виде строки и оно заменит текущее содержимое элемента. При передаче невалидной HTML-строки будет выброшена ошибка. HTML-строкой является строка, которая содержит валидную HTML-разметку, в inner H T M L нельзя передать DOM-элемент.

Пример

Скопировать ссылку «Пример» Скопировано

   Логин  
Введите логин  form> label>Логинlabel> input type="text" id="login" /> div class="error">Введите логинdiv> form>    Скопировать Скопировано Не удалось скопировать   

 const form = document.querySelector('form') console.log(form.innerHTML)// 'Логин
Введите логин
' // Меняем содержимое новым htmlform.innerHTML = '
Вход выполнен
' const form = document.querySelector('form') console.log(form.innerHTML) // 'Логин
Введите логин
' // Меняем содержимое новым html form.innerHTML = '
Вход выполнен
'    Скопировать Скопировано Не удалось скопировать   

   
Вход выполнен  form> div class="success">Вход выполненdiv> form>    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Браузер предоставляет разработчику возможность управлять содержимым на странице и менять его как угодно. inner H T M L – самый простой способ считать или изменить HTML-содержимое элемента. Это свойство использует строки, что даёт возможность легко менять и очищать содержимое элементов.

Когда в inner H T M L присваивается новое значение, все предыдущее содержимое удаляется и создаётся новое, что приводит к перерисовке страницы.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Обращение к свойству inner H T M L вернёт содержимое элемента в виде HTML-строки. Просмотреть или изменить содержимое можно у всех элементов, включая и . Присвоение нового значения к свойству очистит всё текущее содержимое и заменит его новым HTML.

 document.body.innerHTML = 'Hello Inner HTML!' document.body.innerHTML = 'Hello Inner HTML!'    Скопировать Скопировано Не удалось скопировать   

В результате в документ будет вставлен HTML:

 
Hello Inner HTML! h1>Hello Inner HTML!h1>    Скопировать Скопировано Не удалось скопировать   

Стоит помнить, что строка с HTML-разметкой это не DOM-элемент. inner H T M L работает только со строками, самостоятельно разбирает её содержимое и создаёт элементы.

 const divEl = document.createElement('div') // document.body.innerHTML = divEl const divEl = document.createElement('div') // document.body.innerHTML = divEl   Скопировать Скопировано Не удалось скопировать   

Так как в div El находится объект DOM-элемента, то при присвоении в inner H T M L он приведётся к строке, в результате в элемент вставится строка » [ object H T M L Div Element ] » .

 [object HTMLDivElement] body>[object HTMLDivElement]body>    Скопировать Скопировано Не удалось скопировать   

Если передать в inner H T M L строку с невалидным HTML, то будет выброшена ошибка. Однако большинство современных браузеров помогают разработчику, умеют самостоятельно дополнять разметку (например если забыли закрыть тег) и даже дают возможность для кастомных тегов. Потому встретить ошибку при передаче в inner H T M L невалидного HTML очень сложно.

Несмотря на то, что с помощью inner H T M L вставить любой HTML, есть некоторые ограничения, связанные с безопасностью веб-приложений.

Так же не рекомендуется использовать inner H T M L , если нужно просто изменить текст в элементе. Для этой задачи есть свойство inner Text или text Content .

 // Скрипт станет частью body, но не выполнитсяdocument.body.innerHTML = '' // После вставки в html картинка не загрузится и тогда сработает код из onerrordocument.body.innerHTML = ' ' // Скрипт станет частью body, но не выполнится document.body.innerHTML = '' // После вставки в html картинка не загрузится и тогда сработает код из onerror document.body.innerHTML = ' '    Скопировать Скопировано Не удалось скопировать   

Источник

How to display text in the browser using JavaScript

JavaScript display text using document.write() method

You can display texts in the browser programmatically using JavaScript by manipulating the Document Object Model (DOM)

The Document Object Model is a programming interface that allows you to manipulate the output rendered by the browser. The object itself can be accessed from the document variable.

For example, the document.write() method allows you to replace everything inside the HTML element.

Suppose you have the following HTML element content:

You can call the document.write() method and pass the message you want to be displayed in the browser as its argument:

 The HTML will be replaced as follows:

 The document.write() method rewrites everything inside the tag.

Alternatively, you can use the document.querySelector() method to select an HTML tag that’s present on your browser page.

JavaScript display text using document.querySelector() method

The querySelector() method allows you to retrieve a single element that match the query parameter passed to the method.

For example, to replace the element content, you can select the element and assign a new value to its innerText or innerHTML property as follows:

 The resulting HTML content is as follows:

You can learn more about the querySelector() method here: JavaScript querySelector() method explained

Aside from in the browser page, you can also display text output in the browser console using JavaScript. Let’s learn about that next.

JavaScript display text using console.log() method

Every web browser has a developer console panel that you can use to write JavaScript code and manipulate the DOM API.

For example, you can access Chrome browser’s console panel, Press Command+Option+J (Mac) or Control+Shift+J (Windows, Linux, Chrome OS).

The console looks like this:

From there, you can write the following code:

And see the console logs the text as shown below:

The console.log() method allows you to write output to the console by passing the text as its argument.

JavaScript display text using alert() method

The alert() method is a method from the browser’s Window object that allows you to create a popup box with a message.

You can call the alert() method, and pass the text you want to display as its argument. Since you’ve learned how to open the developer console panel from the previous section, let’s test the alert() method from the console:

The output will be as shown below:

And those are the four ways that you can use to display a text programmatically using JavaScript.

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:

Источник

Displaying HTML content via Javascript [closed]

It’s difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

I wonder, how can I display HTML content using Javascript, from what I know and been searching it’s simply not possible to do that. But I have found a javascript code, that is displaying HTML content (not raw) when there is frame in the URL parameters. Here it is: http://otslist.eu/ratingWidget.js — Here you can find the raw javascript code. http://otslist.eu/ratingWidget.js?frame=1 — And here it is displaying the HTML. How is that possible? How to do something like that?

It’s not possible to display HTML using JavaScript? One of the primary uses of JavaScript is to manipulate the DOM — i.e. to display HTML. Start with a basic guide to JavaScript and DOM manipulation.

That code uses jQuery to manipulate the DOM, but you can do it with simple Javascript. Read up on it and you will be able to understand that code yourself.

You might want to improve your question, as your actual question seems something like «I see a *.js extension in the URL, but the page shows as an HTML page when I add frame=1 to the URL. How is this possible?»

3 Answers 3

The JavaScript you see is a PHP script on the server. Use some browser/network debugger tool to check the HTTP response:

HTTP/1.1 200 OK Server nginx/0.7.67 Date Wed, 06 Jun 2012 11:50:44 GMT Content-Type text/html Connection keep-alive X-Powered-By PHP/5.3.10 Expires Thu, 19 Nov 1981 08:52:00 GMT Cache-Control no-store, no-cache, must-revalidate, post-check=0, pre-check=0 Pragma no-cache Content-Encoding gzip 

and see that it is powered by PHP. So it is the output of a PHP script and not a regular JavaScript document.

The PHP script outputs a JavScript when frame=1 is omitted. When the frame=1 is included, it tells the PHP script to embed the JavaScript into an HTML page and serve that.

Update: The PHP script could look like this:

 else < // Generate HTTP headers for the JavaScript, like header("Content-Type", "text/javascript"); >if($asHTML) < // Generate HTML top document part echo ""; > 

Note that I quickly typed this together, so it is probably full of errors. But it should give you the general idea.

Источник