Вставка картинки/текста по кнопкам HTML/Js

Question

Есть код, при нажатии на кнопку "Text" вывести текст, указанный в поле для ввода. А при нажатии на кнопку "Picture", нужно вывести картинку ПЕРЕД текстом. Текст я сделал, а как вывести картинку перед текстом не знаю. (Еще, если не сложно, покажите как выбрать картинку типа как файл, input type = "file", но это не объязательно), просто не особо разбираюсь

function text()
          {
              var newDiv = document.createElement("div");
              newDiv.innerHTML = document.getElementsByName("txt")[0].value;
              document.body.appendChild(newDiv);
          }
        function pic()
        {
            var oldDiv = document.createElement("div");
            oldDiv.innerHTML = document.getElementsByName("txt")[0].value;
            var newDiv = document.getElementsByName("winter")[0].value;
            document.body.insertBefore(newDiv, oldDiv);
        }

<!DOCTYPE html>
<html>
<body>
    <input type="button" onclick="text()" value = "Text">
    <input type="text" name="txt">
    <input type="button" onclick="pic()" value = "Picture">

Answer 1

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

const sendText = document.querySelector('.send-text');
const sendFile = document.querySelector('.send-file');
const textInput = document.querySelector('.text');
const textResult = document.querySelector('.text-result');
const fileInput = document.querySelector('.file');
const fileResult = document.querySelector('.file-result');
let fileDataUrl = '';

sendText.addEventListener('click', () => {
    textResult.innerText += textInput.value;
});

fileInput.addEventListener('change', (e) => {
    if (e.target.files && e.target.files[0]) {
        let reader = new FileReader();

        reader.onload = (e) => {
            fileDataUrl = e.target.result;
        };

        reader.readAsDataURL(e.target.files[0]);
    }
});

sendFile.addEventListener('click', () => {
   fileResult.attributes[0].value = fileDataUrl;
   fileResult.classList.add('show');
})

.text {
   margin-bottom: 40px;
}
.wrapper {
   display: flex;
   justify-content: start;
}
.file-result {
   margin-right: 30px;
}
.file-result {
   display: none;
}
.file-result.show {
   display: block;
}

<button class="send-text">Text</button>
<input type="text" class="text" />
<input type="file" class="file" accept=".jpg, .png, .jpeg" />
<button class="send-file">Picture</button>
<div class="wrapper">
  <img src="" class="file-result" width="200" height="200" />
  <div class="text-result"></div>
</div>

БЛОГ НА HUSL

Вставка картинки/текста по кнопкам HTML/Js

Ответы (1 шт):