使用 JS 将文本添加到 div，[重复]答案

【问题标题】：Adding text to a div with JS, [duplicate]使用 JS 将文本添加到 div，[重复]
【发布时间】：2015-07-10 08:28:34
【问题描述】：

我有一个简单的登录注册表单，当用户输入错误的电子邮件时，他们会显示“正在使用电子邮件”的文本，但是此文本是通过 php echo 完成的，因此我无法编辑其样式和定位.我能想到的唯一方法是使用javascript而不是php echo，这样我就可以将消息输出到另一个已经设置样式的div。我想将消息输出到 div id #log 中。我试过 $('#log').innerHTML = 'Your text.';但是，这是行不通的。

这是我的代码：

<?php
session_start();
include_once 'authentication/dbconnect.php';

if(isset($_SESSION['user'])!="")
{
 header("Location: account.php");
}
if(isset($_POST['btn-login']))
{
 $email = mysql_real_escape_string($_POST['email']);
 $upass = mysql_real_escape_string($_POST['pass']);
 $res=mysql_query("SELECT * FROM users WHERE email='$email'");
 $row=mysql_fetch_array($res);
 if($row['password']==md5($upass))
 {
  $_SESSION['user'] = $row['user_id'];
  header("Location: account.php");
 }
 else
 {
  ?>
       <script>$('#log').innerHTML = 'Your text.';</script>



        <?php
 }

}
?>

<!DOCTYPE html>
<html>
<HEAD>
<title>Website | Loign</title>
<?php include "includes/page_sources.php"; ?>

</HEAD>
<body>


<?php include "includes/navigation.php"; ?> 

<div id="wrapper">

<div id="log"></div>



<div id="login-form">
    <form method="post">
        <input type="text" name="email" placeholder="Your Email" required />
        <input type="password" name="pass" placeholder="Your Password" required />
        <button type="submit" name="btn-login">Log In</button>
        <a href="register.php">Sign Up</a>
    </form>
</div>



</div>

<?php include "includes/footer.php"; ?>


</body>
</html>

【问题讨论】：

在 jquery 中它是 .html("...") 而不是 innerhtml。试试这个:)

标签： javascript php jquery html

【解决方案1】：

您需要添加 jquery 库才能使用 jQuery

使用$('#log')[0].innerHTML或$('#log').html(content)或使用纯javascript作为document.getElementById('log').innerHTML

$(document).ready(function() {
  //wrap code with document ready handler for executing code only after dom is ready

  $('#log')[0].innerHTML = '1';
  //[0] will return dom object

  $('#log1').html('2');
  //html() is the method that can apply to jQuery object

  document.getElementById('log2').innerHTML = '3';
  //pure javascript without jQuery
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- add jQuery library reference -->

<div id="log"></div>
<div id="log1"></div>
<div id="log2"></div>

【讨论】：

这些似乎都不起作用
@BradleyCouisns 可能是因为您在元素在 DOM 中可用之前调用它，或者您没有任何 ID 为 log 的元素，等等......谁知道......
嗨，我无法包含 jquery 库，因为 php 必须位于页面顶部，这意味着 jquery 也是如此，如果在标头标签。如果我将 php 放在页面下方，则会收到警告： session_start(): Cannot send session cookie error
@BradleyCouisns ：然后使用document.getElementById('log').innerHTML

【解决方案2】：

$('#log').innerHTML = 'Your text.';

这里$('#log') 是一个jquery 元素，你不能在其中使用javascript 方式所以，这应该可以正常工作。 $('#log')[0].innerHTML = 'Your text';。使用 [0] 将 jquery 元素转换为 javascript。

但首选方法是使用 html 仅使用 jQuery：

$('#log').html('Your text');

【讨论】：

您好，这些都可以，这可能是页面设置方式的问题
如果您将脚本放在 html 元素之前，那么您可能会遇到问题，但如果您在元素之后使用脚本则不会。如果您在 head 中使用脚本，那么您可以使用 $(document).ready() 处理程序...