如何通过模式编辑元素的 innerHTML？

Question

我有一个模式，当单击 div 元素时出现。如何将 div 元素的文本传递给模式进行编辑，然后在单击保存按钮时用新文本更新 div ？我正在使用 Bootstrap/JQuery v3.4.1 JavaScript 和 CSS.

这是我的 div 元素：

<div id='item' class='board-list' data-toggle='modal' data-target='#DetailsModal'>
     <p>Editable Text</p>
</div>

和我的模态：

<div id="DetailsModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

Answer 1

要将一个元素的文本传递给另一个元素或使用 JavaScript 更新一个元素的文本，请使用 HTMLElement.innerText 方法：

const $input = document.getElementById('input')
const $btn = document.getElementById('btn')
const $output = document.getElementById('output')
var currentText = $output.innerText

$input.value = currentText

$btn.addEventListener('click', () => {
  currentText = $output.innerText
  var newText = $input.value
  $output.innerText = newText
})

<input id="input" type="text">

<button id="btn">Update output text</button>

<br /><br />

<div id="output">
  Lorem ipsum dolor sit amet.
</div>

Answer 2

您需要先向您的模式添加文本输入或文本区域。例如：

<div class="modal-body">
    <textarea class="modal-text-editor"></textarea>
</div>

根据您提供的代码，您似乎正在使用 Bootstrap。假设您已经包含 JQuery 和 Bootstrap JS，您可以使用它们的 Modal Javascript Events.

var editing_text_element;
// get text into editor on modal show
$('#DetailsModal').on('show.bs.modal', function(e) {
    editing_text_element = $(e.relatedTarget).find('p');
    $(this).find('modal-text-editor').val(editing_text_element.text());
});

// save text to <p> tag after saving
$('#DetailsModal').find('btn-primary').on('click', function(e) {
    var edited_text = $('#DetailsModal').find('modal-text-editor').val();
    editing_text_element.text(edited_text);
});

// clear modal upon close
$('#DetailsModal').on('hidden.bs.modal', function(e) {
    $(this).find('modal-text-editor').val('');
});

如何通过模式编辑元素的 innerHTML？

How can I edit an element's innerHTML through a modal?

html

javascript

modal-dialog