Ändern Sie Text in div class mit Text aus einem anderen

Question

Ich versuche, den Text in der div class "instock" mit den Worten 'von Made' zu ändern und die "company" text

<div class="productDetails"> 
<div class="description"> 
<span class="companyName>The Company Name</span> 
</div> 
<div class="instock">Handmade to order</div> 
<div> 

I instock wollen aussehen wie folgt aus:

<div class="instock">Made by The Company Name</div> 

ich habe schon versucht, diese

var companyName = document.getElementsByClassName('companyName'); 
var companyNameText = companyName.nodeValue; 
var instock = document.getElementsByClassName('instock'); 
var instockAlt = instock.nodeValue; 
instockAlt.textContent = 'Made by' + companyNameText; 

auch da dies nicht immer getan werden müssen (wenn n o Firmenname für die Änderung) Ich denke, ich muss prüfen, ob die Span-Klasse zuerst da ist.

Answer 1

Mit JQuery, können Sie die folgende

var companyName = $('.companyName').text(); 
if(companyName){ 
    $('.instock').html('Made by ' + companyName); 
} 

Answer 2

Sie haben eine " fehlt in der <span>. Die Zeile:

var companyName = document.getElementsByClassName('companyName'); 

Gibt eine HTMLCollection zurück.

var companyName = document.getElementsByClassName('companyName')[0]; 
var companyName = document.querySelector('.companyName'); 

Wenn Sie jQuery verwenden, benutzen Sie bitte:

var companyName = $('.companyName'); 
var companyNameText = companyName.text(); 
var instock = $('.instock'); 
var instockAlt = instock.text(); 
instockAlt.text('Made by' + companyNameText); 

Der Grund dafür ist, textContent ist nicht überall verfügbar, während einige Browser innerText verwenden entweder ändern. jQuery kümmert sich um Browser Inkompatibilitäten wie diese. Der letzte Code ist </div> nicht <div>.

Wenn der gesamte Code ein Abschnitt Block ist, dann müssen Sie eine kontextuelle Art und Weise nutzen:

$(function() { 
 
    $('.instock').each(function() { 
 
    if ($(this).prev('.description').find('span').length) 
 
     $(this).text('Made by ' + $(this).prev('.description').find('span').text()); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="productDetails"> 
 
    <div class="description"> 
 
    <span class="companyName">The Company Name</span> 
 
    </div> 
 
    <div class="instock">Handmade to order</div> 
 
</div>

Answer 3

Mit jQuery Sie tun können:

$('.instock').html(function() { 
    if ($(this).prev('.description').find('span').length) return 'Made by ' + $(this).prev('.description').find('span').html() 
}) 

jsFiddle example