как выводить данные на экран в jsfiddle без использования document write()

год назад

Nikolai Gagarinov

Присоединяйтесь к нашему Telegram-сообществу

Ответы

JSFiddle — это онлайн-редактор кода, который позволяет тестировать и делиться HTML, CSS и JavaScript-кодом. Чтобы выводить данные на экран без использования document.write(), вы можете использовать другие методы работы с DOM.

Вы можете создать или использовать существующий HTML-элемент для отображения данных. Например, вы можете использовать <div>, <p> и другие теги.

Пример:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSFiddle Example</title>
</head>
<body>
    <div id="output"></div>

    <script>
        // Ваши данные для вывода
        var dataToDisplay = "Привет, мир!";

        // Находим элемент по ID и устанавливаем его содержимое
        document.getElementById("output").innerText = dataToDisplay;
    </script>
</body>
</html>

В этом примере мы создаем элемент <div> с ID "output". Затем с помощью JavaScript мы находим этот элемент и устанавливаем его содержимое с помощью свойства innerText.

Если вы хотите добавлять HTML-контент, вместо текста, используйте innerHTML:

var dataToDisplay = "<strong>Привет, мир!</strong>";
document.getElementById("output").innerHTML = dataToDisplay;

Вы также можете динамически создавать элементы и добавлять их на страницу:

<div id="container"></div>

<script>
    var dataToDisplay = "Привет, мир!";

    // Создаем новый элемент
    var newElement = document.createElement("p");
    newElement.innerText = dataToDisplay;

    // Добавляем новый элемент в контейнер
    document.getElementById("container").appendChild(newElement);
</script>

Если вы часто работаете с динамическими данными, рассмотрите использование шаблонов. Вы можете создавать HTML-шаблоны и вставлять их в DOM.

<template id="dataTemplate">
    <p></p>
</template>

<div id="container"></div>

<script>
    var dataToDisplay = "Привет, мир!";
    var template = document.getElementById("dataTemplate");
    var clone = document.importNode(template.content, true);

    clone.querySelector('p').innerText = dataToDisplay;
    document.getElementById("container").appendChild(clone);
</script>

9 месяцев назад

Ivan Gagarinov

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

2 месяца

ООП на Javascript

Навык глубокого понимания архитектуры и написания чистого кода, позволяющий решать сложные задачи

1 месяц

Асинхронное программирование на JS

Навык асинхронного программирования в JavaScript: писать быстрый код, расти в грейде и успешно проходить собеседования.

8 месяцев

Автоматизатор тестирования на JavaScript

Git, JavaScript, Playwright, бэкенд-тесты, юнит-тесты, API-тесты, UI-тесты, Github Actions, HTTP/HTTPS, API, Docker, SQL

1 месяц

Основы JavaScript

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

Похожие вопросы