Question

我正在建立聊天，我需要在单击“发送”时将文本区域的内容附加到内部div

<div class="inner" id="inner">
     <div class="incoming" id="incoming">
         <div class="them" id="them">Lorem
         </div>
     </div>
     <div class="outgoing" id="outgoing">
         <div class="me" id="me">Lorem ipsum
     </div>
     </div>
 </div>

按钮和文本区域代码为

    <textarea class="input" id="input" placeholder="Message.."></textarea>
    <a class="waves-effect waves-light" id="send-btn" >Send</a>

JavaScript

var sendButton= document.getElementById('send-btn');
var textArea = document.getElementById('input');
var innerDiv= document.getElementById('inner');
var message=textArea.value;

sendButton.addEventListener('click', function(){
    innerDiv.innerHTML=meMessage;
});  

var meMessage= '<div class="outgoing" id="outgoing">'+
    '<div class="me" id="me"></div></div>';

我要执行的操作是在单击“发送”时将文本区域的文本值显示给名为“ me”的内部div 并获取textarea的值以将其保存到数据库。我该怎么做到

Answer 1

首先，您不应该手动创建html元素，因为它们很容易受到XSS攻击，并了解有关逃避机制以防止注入恶意代码的信息。尝试使用document.createElement('div');方法使用有效的innerText创建div。

后来的使用方法：

 innerDiv.appendChild(createdElement);

要追加元素。

您可以创建构建器来构建所需的html元素，并且必须对div元素内的文本进行htmlEncode。

const sendButton = document.getElementById('send-btn');
const textArea = document.getElementById('input');
const innerDiv = document.getElementById('inner');
var message = textArea.value;

sendButton.addEventListener('click', function () {
    const message = new MessageContainerBuilder().BuildMessage(textArea.value);
    innerDiv.appendChild(message);
    textArea.value = '';
});

function encodeHtmlEntity(input) {
    var output = input.replace(/[\u00A0-\u9999<>\&]/gim, function (i) {
        return '&#' + i.charCodeAt(0) + ';';
    });

    return output;
}

function MessageContainerBuilder() {
    var createDivElement = function (classTest) {
        var div = document.createElement('div');

        var classAttr = document.createAttribute('class');
        classAttr.value = classTest;
        div.setAttributeNode(classAttr);

        return div;
    };

    var createSpanElement = function (value, classTest) {
        var span = document.createElement('span');

        if (classTest) {
            var classAttr = document.createAttribute('class');
            classAttr.value = classTest;
            span.setAttributeNode(classAttr);
        }

        span.innerText = encodeHtmlEntity(value);

        return span;
    };

    this.BuildMessage = function (text) {
        var divContainer = createDivElement('outgoing');
        var messageSpan = createSpanElement(text, 'me');

        divContainer.appendChild(messageSpan);

        return divContainer;
    };
}

<div class="inner">
    <div class="incoming">
        <div class="them">Lorem
        </div>
    </div>
    <div class="outgoing">
        <div class="me">Lorem ipsum
        </div>
    </div>
</div> 

<textarea class="input" id="input" placeholder="Message..."></textarea>
<button class="waves-effect waves-light" id="send-btn">Send</button>

更新：扩展的代码段代码。已删除ID，因为不应在此处使用它们来创建具有相同ID的多个消息元素。将锚点更改为按钮。

Answer 2

您需要在单击链接时获取textarea的值

var sendButton = document.getElementById('send-btn');
var textArea = document.getElementById('input');
var innerDiv = document.getElementById('inner');
var message = textArea.value;

sendButton.addEventListener('click', function() {
  innerDiv.innerHTML = `<div class="outgoing" id="outgoing">${textArea.value}
  <div class="me" id="me"></div></div>`;
});

<div class="inner" id="inner">
  <div class="incoming" id="incoming">
    <div class="them" id="them">Lorem
    </div>
  </div>
  <div class="outgoing" id="outgoing">
    <div class="me" id="me">Lorem ipsum
    </div>
  </div>
</div>


<textarea class="input" id="input" placeholder="Message.."></textarea>
<a class="waves-effect waves-light" id="send-btn">Send</a>

Answer 3

innerDiv.append(message)

代替

innerDiv.innerHTML=message

Answer 4

您可以使用它。您的邮件变量未收到textarea值

var sendButton= document.getElementById('send-btn');
var innerDiv= document.getElementById('inner');
sendButton.addEventListener('click', function(){

    innerDiv.innerHTML=innerDiv.innerHTML+'<div class="outgoing" id="outgoing">'+document.getElementById('input').value+
    '<div class="me" id="me"></div></div>';

});

<div class="inner" id="inner">
     <div class="incoming" id="incoming">
         <div class="them" id="them">Lorem
         </div>
     </div>
     <div class="outgoing" id="outgoing">
         <div class="me" id="me">Lorem ipsum
     </div>
     </div>
 </div> 

 <textarea class="input" id="input" placeholder="Message.."></textarea>
    <a class="waves-effect waves-light" id="send-btn" >Send</a>

Answer 5

也许用那个替换您的js：

document.getElementById('send-btn').addEventListener('click', 
    function(){
        var userInput = document.getElementById('input').value;
        if(userInput) { document.getElementById('me').innerHTML += '<br>' + userInput; }
    }
);

那应该让您向前迈进...祝您保存到数据库的运气好。

从textarea Javascript将内容插入div

5 个答案: