使用 javascript 获取 DIV 的内容，.innerHTML 不起作用？

Posted 2023-05-07

【中文标题】使用 javascript 获取 DIV 的内容，.innerHTML 不起作用？

【英文标题】：Get content of DIV using javascript, .innerHTML not working?

【发布时间】：2015-12-02 18:11:49

【问题描述】：

我目前有一个 jQuery 拖放，并希望将最终结果插入到数据库中。我想使用 javascript 来获取值，但我一直得到结果“NULL”，而不是实际内容（由 php/mysql 生成）

这是我的 JavaScript

function getValue() 
var ajaxRequest;  // The variable that makes Ajax possible!
try

  // Opera 8.0+, Firefox, Safari
  ajaxRequest = new XMLHttpRequest();
    catch (e)

  // Internet Explorer Browsers
  try
     ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
  catch (e) 

     try
        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
     catch (e)

        // Something went wrong
        alert("Your browser broke!");
        return false;
     
  
  

var left1 = document.getElementById('left1').getAttribute('value');
var left2 = document.getElementById("left2").getAttribute('value'); 
var left3 = document.getElementById("left3").getAttribute('value');

 var queryString = "?left1=" + left1 ;
 queryString +=  "&left2=" + left2 + "&left3=" + left3;
  ajaxRequest.open("GET", "http://localhost:8888/ff/public_html/drag_and_drop.php" + queryString, true);
 ajaxRequest.send(null); 

PHP 代码：

$dinner1 = $_GET['dinner1'];
$dinner2 = $_GET['dinner2'];
$dinner3 = $_GET['dinner3'];

$query2 = "INSERT INTO weekly_print (dinner1, dinner2, dinner3) VALUES ('".$dinner1."','".$dinner2."','".$dinner3."')";
            $result2 = mysql_query ($query2) or trigger_error("Query: $query\n<br />MySQL Error: " . mysql_error());
            if (@mysql_num_rows($result2) != 0) 
                echo 'Success!!';

        

我尝试在不使用 getAttrubute('value'); 的情况下使用它，但结果我一直收到 [object HTMLDivElement]。

这些是类似的问题，但对我一点用都没有。

how get content of div via javascriptGet content of a DIV using JavaScriptJavaScript innerHTML not working

使用 innerHTML 时，我得到的结果是 '[object HTMLDivElement]'。

我知道我需要切换到 mysqli 而不是 mysql，它目前在测试服务器上，所以请忽略它。

我的 HTML：

<div class="column" id="left1" style="border: 2px solid #a13f80;"></div>
<div class="column" id="left2" style="border: 2px solid #a13f80;"></div>
<div class="column" id="left3" style="border: 2px solid #a13f80;"></div>

【问题讨论】：

危险：您使用的是an obsolete database API，应该使用modern replacement。您很容易受到SQL injection attacks的影响，现代 API 可以让您更轻松地从 defend 中获得。

Div 元素没有值。您的 div 元素没有 value 属性（无论如何这都是无效的）并且它们没有任何内容。你想得到什么？

【参考方案1】：

您只需要获取值而不是属性： document.getElementById('left1').value;

将您的代码替换为：

var left1 = document.getElementById('left1').value;
var left2 = document.getElementById("left2").value; 
var left3 = document.getElementById("left3").value;

并将您的 div 结构转换为输入字段，因为从 div 获取值并将其传递给 php 是非常非标准的方法：

<input class="column" id="left1" style="border: 2px solid #a13f80;" />
<input class="column" id="left2" style="border: 2px solid #a13f80;" />
<input class="column" id="left3" style="border: 2px solid #a13f80;" />

【讨论】：

这是我尝试的第一件事，但我的结果是 [object HTMLDivElement]？

哦，你没有任何输入

使用 document.getElemebetByID() 你不需要输入吗？还是我走错了路？

与 getElementByID 无关 - 但只有输入有 .value

你能建议我如何改进吗？ @Vicky Gonsalves

【参考方案2】：

您的 div 为空，这就是 innerHTML 无法正常工作的原因

PS：不能评论小点

【讨论】：

innerText 是非标准的，并非所有正在使用的浏览器都支持。这应该是评论，而不是答案。

如前所述 var left1 = document.getElementById('left1').value;不工作，我得到结果 [object HTMLDivElement]。

@Denni007 它们不是空的，它们是由 PHP 从数据库中生成的。

哦，我可以评论我自己的答案，这很有趣。抱歉，我需要 50 个声望值。

@Fushy 填充后的 HTML 看起来如何？你能用codepen之类的东西来说明问题吗？

【参考方案3】：

使用innerText 或textContent 属性获取div 文本。

left1div = document.getElementById('left1');
var left1divval = left1div.textContent || left1div.innerText;   
alert(left1divval);

See Working Example

【讨论】：

我已经把它改成了这个，但现在它“未定义”？

检查工作示例......它工作正常。您的代码中还有其他错误。