如何在返回值中换行?或者返回 HTML 的更好方法

How to line break in a return value? Or a better way of returning HTML?

本文关键字：HTML 返回 更好 方法 或者 返回值 换行      更新时间：2023-09-26

我正在尝试在我的showPhoto（）函数中创建换行符，但似乎没有任何效果。我试过使用 br，尝试使用 html（） 但仍然没有让步。我的 Javascript 代码中的注释显示了我正在谈论的返回行。如果有更好的方法可以达到我想要的结果？？

任何帮助，不胜感激。谢谢

.JS： 

    function photo(theCountry, theLocation, theCamera, theDescription) {
    this.photoCountry = theCountry;
    this.photoLocation = theLocation;
    this.photoCamera = theCamera;
    this.photoDescription = theDescription;
    this.showPhoto = function() {
    // How do i create line breaks here?? I want each sub heading on a different line.
    return 'Country: ' + this.photoCountry + ' Location: ' + this.photoLocation + ' Shot With: ' + this.photoCamera + ' Description: ' + this.photoDescription;    
    }
}
var photo1 = new photo('New Zealand', 'Queenstown', 'Canon 550D', '...');
var photo2 = new photo('Singapore', 'Skyline', 'Canon 550D', '....');
var photo3 = new photo('Canada', 'Vancouver', 'Canon 550D', '...');
var photo4 = new photo('New Zealand', 'Lake Wanaka', 'Canon 550D', '....');
var photo5 = new photo('Australia', 'Mornington Peninsula', 'Canon 550D', '...')
$('.photoImg').click(function() {
    var sourceImage = document.createElement('img');
        sourceImage.className = 'photoFocus';
        sourceImage.src = this.src;
    var theDiv = document.getElementById('selectionContainer');
        $(theDiv).html(sourceImage);
    var textDiv = document.createElement('div');
    textDiv.setAttribute('id', 'textContainer');
    var textNodeArray = {'photo1': photo1, 'photo2': photo2, 'photo3': photo3, 'photo4': photo4, 'photo5': photo5}
    $('#textContainer').html(document.createTextNode(textNodeArray[this.id].showPhoto()));          
});
你可以

像这样使用CSS

li{
float:left;
padding:5px; /* or anything you need */
margin-top:10px;  /* or anything you need */
}

这是你的 HTML

  <ul> 
        <li> <img src='images/newzealand.jpg' class='photoImg' id='photo1'> </li>
        <li> <img src='images/singapore.jpg' class='photoImg' id='photo2'> </li>
        <li> <img src='images/vancouver.jpg' class='photoImg' id='photo3'> </li>
        <li> <img src='images/newzealand2.jpg' class='photoImg' id='photo4'> </li>
        <li> <img src='images/mornington.jpg' class='photoImg' id='photo5'> </li>
        <li> <img src='images/newzealand1.jpg' class='photoImg' id='photo6'> </li>
        <li> <img src='images/newzealand3.jpg' class='photoImg' id='photo7'> </li>
    </ul>

你不能在 TextNode（由 createTextNode 创建）中添加换行符。

看到这个 ：

Javascript，尝试在创建文本节点方法中添加换行符

一个解决方案可能是让你的showPhoto函数返回不同行的文本列表，并创建多个由"br"节点分隔的 TextNode。

本着以下精神的东西： 

this.showPhoto = function() {
  // How do i create line breaks here?? I want each sub heading on a different line.
  return ["Country : " + this.photoCountry,
        "Location : " + this.photoLocation, ...]
}

然后（可能在行上使用迭代器，任何可能包装 DOM 元素以取悦 jquery）

var lines = textNodeArray[this.id].showPhoto())
$('#textContainer').append(document.createTextNode(lines[0]);
$('#textContainer').append(document.createElement("br"));
$('#textContainer').append(document.createTextNode(lines[1]);
..

在输出中使用 <br> 标记（您将将其视为 HTML 片段）：

return 'Country: ' + this.photoCountry + '<br>Location: ' + this.photoLocation + '<br>Shot With: ' + this.photoCamera + '<br>Description: ' + this.photoDescription;

当你使用 jQuery 时，你可以直接输出你的 showPhoto 方法返回的 HTML：

$('#textContainer').html(textNodeArray[this.id].showPhoto());

jQUery将解析HTML字符串并为您处理实际的DOM节点创建。

相关文章：